/* =====================================================================
REUSABLE COMPONENTS
Naming: .block, .block__element, .block--variant (BEM, French names,
as in the prototype). Every component is shown on the catalogue page.
===================================================================== */
/* ---------------------------------------------------------------------
Full-height side menu
--------------------------------------------------------------------- */
.app__cote { background: var(--surface); border-right: var(--trait-fin) solid var(--trait); }
.menu {
position: sticky; top: 0px;
height: 100vh;
overflow-y: auto;
display: flex; flex-direction: column;
padding: var(--esp-4) 0 var(--esp-4);
background: var(--surface);
}
.menu__marque {
display: flex; align-items: center; gap: var(--esp-2);
padding: var(--esp-1) var(--esp-5) var(--esp-4);
font-size: var(--taille-l); font-weight: var(--graisse-forte); color: var(--texte);
}
.menu__marque:hover { text-decoration: none; }
.menu__logo {
width: 26px; height: 26px; border-radius: var(--rayon-s);
border: 1.5px solid var(--structure); display: grid; place-items: center; color: var(--structure);
}
.menu__marque b { color: var(--accent); font-weight: inherit; }
.menu__section { padding: 0 var(--esp-3); }
.menu__titre {
margin: var(--esp-4) var(--esp-3) var(--esp-1);
font-size: 10.5px; font-weight: var(--graisse-moyenne); color: var(--texte-doux);
text-transform: uppercase; letter-spacing: var(--espacement-capitales);
}
.menu__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menu__lien {
display: flex; align-items: center; gap: var(--esp-3);
min-height: 38px; padding: var(--esp-2) var(--esp-3);
border: var(--trait-fin) solid transparent; border-radius: var(--rayon-m);
color: var(--texte); text-decoration: none;
}
.menu__lien .icone { color: var(--texte-doux); }
.menu__lien:hover { background: var(--surface-2); text-decoration: none; }
.menu__lien[aria-current="page"] {
border-color: var(--actif-contour); background: var(--actif-fond);
box-shadow: var(--halo-actif); font-weight: var(--graisse-moyenne);
}
.menu__lien[aria-current="page"] .icone { color: var(--structure); }
.menu__libelle { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.menu__pied { margin-top: auto; padding: var(--esp-4) var(--esp-5) 0; font-size: var(--taille-xs); color: var(--texte-doux); }
/* The B1Screen logo (_logo.html), inline so it takes the theme. */
.menu__marque .logo { display: block; height: 52px; width: auto; }
.logo__violet { fill: var(--logo-violet); }
.logo__bleu { fill: var(--logo-bleu); }
/* On phones and narrow tablets: drawer menu */
@media (max-width: 900px) {
.app__cote { display: contents; }
.menu {
border-right: var(--trait-fin) solid var(--trait);
position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 300px); height: 100%;
transform: translateX(-102%); transition: transform var(--duree-lente);
box-shadow: var(--ombre-flottante);
}
.menu[data-ouvert="true"] { transform: none; }
.menu-voile { position: fixed; inset: 0; z-index: 55; background: var(--voile); }
}
/* ---------------------------------------------------------------------
Top bar: current client, search, account
--------------------------------------------------------------------- */
.barre-haut {
position: sticky; top: 0px; z-index: 30;
display: flex; align-items: center; gap: var(--esp-3);
min-height: var(--haut-barre); padding: var(--esp-2) var(--esp-6);
background: var(--fond);
border-bottom: var(--trait-fin) solid var(--trait);
}
.barre-haut .barre-haut__menu { display: none; }
.selecteur-client { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.selecteur-client__libelle { font-size: var(--taille-xs); color: var(--texte-doux); text-transform: uppercase; letter-spacing: var(--espacement-capitales); }
.selecteur-client__fixe {
display: inline-flex; align-items: center; gap: var(--esp-2);
font-weight: var(--graisse-moyenne); overflow-wrap: anywhere;
}
.selecteur-client .liste-deroulante { min-width: 220px; font-weight: var(--graisse-moyenne); }
.recherche-globale { margin-left: auto; width: min(360px, 40vw); }
.compte {
display: flex; align-items: center; gap: var(--esp-2);
color: var(--texte); font-size: var(--taille-s); line-height: var(--interligne-serre);
}
.compte__texte { display: flex; flex-direction: column; }
.compte__role { color: var(--texte-doux); font-size: var(--taille-xs); }
@media (max-width: 900px) {
.barre-haut { padding: var(--esp-2) var(--esp-4); gap: var(--esp-2); flex-wrap: wrap; }
.barre-haut .barre-haut__menu { display: inline-flex; }
.recherche-globale { order: 5; width: 100%; margin-left: 0; }
.compte { margin-left: auto; }
.compte__texte { display: none; }
.selecteur-client__libelle { display: none; }
.selecteur-client .liste-deroulante { min-width: 0; max-width: 56vw; }
}
/* ---------------------------------------------------------------------
Persistent emergency banner (every page)
--------------------------------------------------------------------- */
.bandeau-urgence {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4);
padding: var(--esp-3) var(--esp-6);
background: var(--urgence-fond); color: var(--urgence-texte);
border-bottom: 2px solid var(--urgence-trait);
}
.bandeau-urgence__icone { flex: none; }
.bandeau-urgence__texte { flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
.bandeau-urgence__texte strong { font-weight: var(--graisse-forte); }
.bandeau-urgence a { color: inherit; text-decoration: underline; }
.bandeau-urgence__actions { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.bandeau-urgence .bouton { border-color: currentColor; color: inherit; background: transparent; }
.bandeau-urgence .bouton--fort { background: var(--urgence-texte); color: var(--urgence-fond); border-color: var(--urgence-texte); }
@media (max-width: 900px) { .bandeau-urgence { padding: var(--esp-3) var(--esp-4); } }
/* ---------------------------------------------------------------------
Buttons
--------------------------------------------------------------------- */
.bouton {
display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
min-height: var(--haut-controle); padding: var(--esp-1) var(--esp-4);
border: var(--trait-fin) solid var(--trait-fort); border-radius: var(--rayon-m);
background: var(--surface-2); color: var(--texte);
font-weight: var(--graisse-moyenne); line-height: var(--interligne-serre);
text-align: center; text-decoration: none; white-space: normal;
transition: border-color var(--duree), background var(--duree), box-shadow var(--duree);
}
.bouton:hover { border-color: var(--structure); text-decoration: none; }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.bouton--principal {
background: var(--accent-fond); color: var(--accent-sur); border-color: var(--accent-contour);
box-shadow: var(--halo-principal);
}
.bouton--principal:hover { border-color: var(--accent-contour); box-shadow: 0 0 20px var(--accent-halo); }
.bouton--discret { background: transparent; border-color: transparent; color: var(--texte); }
.bouton--discret:hover { background: var(--surface-2); border-color: var(--trait); }
.bouton--danger { color: var(--probleme); border-color: var(--probleme-trait); background: transparent; }
.bouton--danger:hover { border-color: var(--probleme); background: var(--probleme-fond); }
.bouton--danger-plein { color: var(--accent-sur); background: var(--danger-fond); border-color: var(--probleme); }
.bouton--petit { min-height: var(--haut-controle-petit); padding: 2px var(--esp-3); font-size: var(--taille-s); border-radius: var(--rayon-s); }
.bouton--icone { padding: 0; width: var(--haut-controle); }
.bouton--icone.bouton--petit { width: var(--haut-controle-petit); }
.bouton--large { width: 100%; }
.groupe-boutons { display: inline-flex; flex-wrap: wrap; gap: var(--esp-2); }
/* ---------------------------------------------------------------------
State badges, tags, counters, avatars
--------------------------------------------------------------------- */
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px var(--esp-2) 2px 7px; border-radius: var(--rayon-pastille);
border: var(--trait-fin) solid var(--neutre-trait);
font-size: var(--taille-xs); font-weight: var(--graisse-moyenne); line-height: 1.5;
white-space: nowrap; /* a one-word state never breaks in a narrow column */
color: var(--texte-doux); max-width: 100%; overflow-wrap: anywhere;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge--ok { color: var(--ok); border-color: var(--ok-trait); background: var(--ok-fond); }
.badge--attention { color: var(--attention); border-color: var(--attention-trait); background: var(--attention-fond); }
.badge--probleme { color: var(--probleme); border-color: var(--probleme-trait); background: var(--probleme-fond); }
.badge--info { color: var(--structure); border-color: var(--structure); background: var(--structure-pale); }
.badge--accent { color: var(--accent); border-color: var(--accent); background: var(--accent-pale); }
.badge--sans-point::before { display: none; }
.badge--sans-point { padding-left: var(--esp-2); }
.etiquette {
display: inline-flex; align-items: center; gap: var(--esp-1);
padding: 1px var(--esp-2); border-radius: var(--rayon-s);
background: var(--surface-3); color: var(--texte-doux);
font-size: var(--taille-xs); line-height: 1.6; max-width: 100%; overflow-wrap: anywhere;
}
.etiquette--bouton { border: 0; cursor: pointer; }
.etiquette--bouton:hover { color: var(--texte); }
.compteur {
display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
border-radius: var(--rayon-pastille); background: var(--surface-3); color: var(--texte-doux);
font-size: 11px; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums;
}
.compteur--fort { background: var(--accent-fond); color: var(--accent-sur); border: var(--trait-fin) solid var(--accent-contour); }
.compteur--probleme { background: var(--probleme-fond); color: var(--probleme); border: var(--trait-fin) solid var(--probleme-trait); }
.avatar {
width: 32px; height: 32px; border-radius: 50%; flex: none;
display: inline-grid; place-items: center;
background: var(--structure-pale); color: var(--structure);
border: var(--trait-fin) solid var(--structure);
font-size: var(--taille-xs); font-weight: var(--graisse-forte);
}
.avatar--petit { width: 24px; height: 24px; font-size: 10px; }
/* ---------------------------------------------------------------------
Forms
--------------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ__libelle { font-size: var(--taille-s); font-weight: var(--graisse-moyenne); }
.champ__aide { font-size: var(--taille-xs); color: var(--texte-doux); }
.champ__erreur { font-size: var(--taille-xs); color: var(--probleme); }
.champ--en-ligne { flex-direction: row; align-items: center; gap: var(--esp-3); }
.saisie, .liste-deroulante, .zone-texte {
width: 100%; min-height: var(--haut-controle);
padding: var(--esp-1) var(--esp-3);
border: var(--trait-fin) solid var(--trait-fort); border-radius: var(--rayon-s);
background: var(--surface-2); color: var(--texte);
}
.saisie::placeholder, .zone-texte::placeholder { color: var(--texte-doux); }
.saisie:hover, .liste-deroulante:hover, .zone-texte:hover { border-color: var(--texte-doux); }
.saisie:focus-visible, .liste-deroulante:focus-visible, .zone-texte:focus-visible { border-color: var(--focus); }
.saisie[aria-invalid="true"] { border-color: var(--probleme); }
.zone-texte { min-height: 84px; padding: var(--esp-2) var(--esp-3); resize: vertical; }
.liste-deroulante { padding-right: var(--esp-6); }
.saisie--petite, .liste-deroulante--petite { min-height: var(--haut-controle-petit); font-size: var(--taille-s); }
.saisie--chiffres { font-variant-numeric: tabular-nums; text-align: right; }
/* Input with an icon (search) */
.recherche { position: relative; display: block; }
.recherche .icone { position: absolute; left: var(--esp-3); top: 50%; transform: translateY(-50%); color: var(--texte-doux); pointer-events: none; }
.recherche .saisie { padding-left: 38px; border-radius: var(--rayon-pastille); }
/* Input with a unit */
.unite { display: flex; align-items: stretch; }
.unite .saisie { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.unite__suffixe {
display: grid; place-items: center; padding: 0 var(--esp-2);
border: var(--trait-fin) solid var(--trait-fort); border-left: 0;
border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
background: var(--surface-3); color: var(--texte-doux); font-size: var(--taille-xs);
}
/* Switch: */
.bascule { display: inline-flex; align-items: center; gap: var(--esp-2); cursor: pointer; }
.bascule input {
appearance: none; margin: 0; flex: none; cursor: pointer;
width: 38px; height: 22px; border-radius: var(--rayon-pastille);
background: var(--surface-3); border: var(--trait-fin) solid var(--trait-fort);
position: relative; transition: background var(--duree), border-color var(--duree);
}
.bascule input::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
background: var(--texte-doux); transition: transform var(--duree), background var(--duree);
}
.bascule input:checked { background: var(--accent-fond); border-color: var(--accent-contour); }
.bascule input:checked::after { transform: translateX(16px); background: var(--accent-sur); }
.bascule input:focus-visible { box-shadow: var(--focus-anneau); }
/* Checkbox and radio button */
.case { display: inline-flex; align-items: flex-start; gap: var(--esp-2); cursor: pointer; }
.case input { margin: 3px 0 0; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
/* Segmented control (e.g. % / px, day / week / month) */
.segmente {
display: inline-flex; padding: 2px; gap: 2px;
border: var(--trait-fin) solid var(--trait-fort); border-radius: var(--rayon-m);
background: var(--surface-2);
}
.segmente button, .segmente label {
border: var(--trait-fin) solid transparent; background: none; color: var(--texte-doux);
padding: 3px var(--esp-3); border-radius: var(--rayon-s); font-size: var(--taille-s);
font-weight: var(--graisse-moyenne); cursor: pointer;
}
.segmente input { position: absolute; opacity: 0; pointer-events: none; }
.segmente button[aria-pressed="true"], .segmente label:has(input:checked) {
background: var(--surface); color: var(--texte); border-color: var(--actif-contour);
}
.segmente label:has(input:focus-visible) { box-shadow: var(--focus-anneau); }
/* Field group */
.formulaire { display: flex; flex-direction: column; gap: var(--esp-4); }
.formulaire__ligne { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.formulaire__pied { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: flex-end; }
/* ---------------------------------------------------------------------
Cards and tiles
--------------------------------------------------------------------- */
.carte {
background: var(--surface);
border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-l);
min-width: 0;
}
.carte--interactive { transition: border-color var(--duree), box-shadow var(--duree); }
.carte--interactive:hover { border-color: var(--trait-fort); }
.carte--selection { border-color: var(--actif-contour); box-shadow: var(--halo-actif); }
.carte__entete {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2);
padding: var(--esp-4) var(--esp-4) 0;
}
.carte__titre { font-size: var(--taille-l); font-weight: var(--graisse-moyenne); overflow-wrap: anywhere; }
.carte__entete .pousse { margin-left: auto; }
.carte__corps { padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); }
.carte__pied {
display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center;
padding: var(--esp-3) var(--esp-4); border-top: var(--trait-fin) solid var(--trait);
}
/* Key figure tile */
.tuile {
display: flex; flex-direction: column; gap: var(--esp-1);
padding: var(--esp-4); min-width: 0;
background: var(--surface); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-l);
color: var(--texte); text-decoration: none;
}
a.tuile:hover { border-color: var(--trait-fort); text-decoration: none; }
.tuile__valeur { font-size: var(--taille-3xl); font-weight: var(--graisse-forte); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tuile__libelle { color: var(--texte-doux); overflow-wrap: anywhere; }
.tuile--ok .tuile__valeur { color: var(--ok); }
.tuile--attention .tuile__valeur { color: var(--attention); }
.tuile--probleme .tuile__valeur { color: var(--probleme); }
.tuiles { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* Key / value definition list */
.definitions { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: var(--esp-2) var(--esp-4); }
.definitions dt { color: var(--texte-doux); }
.definitions dd { overflow-wrap: anywhere; }
/* ---------------------------------------------------------------------
Screen preview: NOT THEMED (real render, black ground)
--------------------------------------------------------------------- */
.apercu {
display: block; position: relative; overflow: hidden;
aspect-ratio: var(--ratio, 16 / 9);
background: var(--ecran-fond); color: var(--ecran-heure-texte);
border-radius: var(--rayon-m);
color-scheme: dark;
}
.apercu--cadre { aspect-ratio: 16 / 9; }
.apercu--cadre .apercu__ecran { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); aspect-ratio: var(--ratio); background: var(--ecran-fond); }
.apercu > svg, .apercu__ecran > svg { width: 100%; height: 100%; }
.apercu > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.apercu__heure {
position: absolute; right: var(--esp-2); bottom: var(--esp-2);
display: inline-flex; align-items: center; gap: var(--esp-1);
padding: 1px var(--esp-2); border-radius: var(--rayon-s);
background: var(--ecran-heure-fond); color: var(--ecran-heure-texte); font-size: 11px;
}
.apercu__vide {
position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--esp-4);
color: var(--ecran-vide-texte); font-size: var(--taille-s);
}
.apercu--perime > svg, .apercu--perime > img { filter: grayscale(1) brightness(.55); }
/* Display card */
.carte-afficheur { display: flex; flex-direction: column; overflow: hidden; color: var(--texte); }
.carte-afficheur .apercu { border-radius: 0; }
.carte-afficheur__corps { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4) var(--esp-4); }
.carte-afficheur__ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-1) var(--esp-2); flex-wrap: wrap; }
.carte-afficheur__nom { flex: 1 1 8em; min-width: 0; font-size: var(--taille-l); font-weight: var(--graisse-moyenne); overflow-wrap: anywhere; color: var(--texte); }
.carte-afficheur__nom:hover { color: var(--structure); }
.carte-afficheur__meta { font-size: var(--taille-s); color: var(--texte-doux); overflow-wrap: anywhere; }
.carte-afficheur__capture { display: flex; align-items: center; gap: var(--esp-1); font-size: var(--taille-xs); color: var(--texte-doux); }
.carte-afficheur__capture .icone { width: 12px; height: 12px; }
.carte-afficheur__passe {
display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); align-items: center; justify-content: space-between;
padding-top: var(--esp-2); border-top: var(--trait-fin) solid var(--trait); font-size: var(--taille-s);
}
.carte-afficheur__passe a { font-weight: var(--graisse-moyenne); }
.carte-afficheur__quoi { min-width: 0; overflow-wrap: anywhere; }
/* ---------------------------------------------------------------------
Table
--------------------------------------------------------------------- */
.tableau-conteneur {
position: relative; /* keeps screen-reader-only text inside the scrolling area */
overflow-x: auto; background: var(--surface);
border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-l);
}
.tableau { width: 100%; border-collapse: collapse; font-size: var(--taille-s); }
.tableau th, .tableau td { padding: var(--esp-3) var(--esp-4); text-align: left; vertical-align: middle; border-bottom: var(--trait-fin) solid var(--trait); }
.tableau tr:last-child td { border-bottom: 0; }
.tableau th {
font-size: var(--taille-xs); font-weight: var(--graisse-moyenne); color: var(--texte-doux);
text-transform: uppercase; letter-spacing: var(--espacement-capitales); white-space: nowrap;
}
.tableau th button { all: unset; cursor: pointer; display: inline-flex; gap: var(--esp-1); align-items: center; }
.tableau th button:focus-visible { box-shadow: var(--focus-anneau); border-radius: var(--rayon-s); }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau--dense th, .tableau--dense td { padding: 6px var(--esp-3); }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------------------
Tabs
--------------------------------------------------------------------- */
.onglets { display: flex; gap: var(--esp-1); border-bottom: var(--trait-fin) solid var(--trait); overflow-x: auto; }
.onglets__onglet {
display: inline-flex; align-items: center; gap: var(--esp-2);
padding: var(--esp-2) var(--esp-3); border: 0; background: none; color: var(--texte-doux);
border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
font-weight: var(--graisse-moyenne); text-decoration: none;
}
.onglets__onglet:hover { color: var(--texte); text-decoration: none; }
.onglets__onglet[aria-selected="true"], .onglets__onglet[aria-current="page"] { color: var(--texte); border-bottom-color: var(--accent); }
/* ---------------------------------------------------------------------
Filter bar and chips
--------------------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.filtres .recherche { flex: 1 1 240px; max-width: 360px; }
.puce {
display: inline-flex; align-items: center; gap: 6px;
min-height: var(--haut-controle-petit); padding: 2px var(--esp-3);
border: var(--trait-fin) solid var(--trait-fort); border-radius: var(--rayon-pastille);
background: transparent; color: var(--texte-doux); font-size: var(--taille-s);
}
.puce:hover { color: var(--texte); border-color: var(--texte-doux); }
.puce[aria-pressed="true"] { color: var(--texte); border-color: var(--actif-contour); background: var(--actif-fond); }
.puce .compteur { height: 18px; min-width: 18px; }
/* ---------------------------------------------------------------------
Inline alerts
--------------------------------------------------------------------- */
.alerte {
display: flex; gap: var(--esp-3); align-items: flex-start;
padding: var(--esp-3) var(--esp-4); border-radius: var(--rayon-m);
border: var(--trait-fin) solid var(--structure); background: var(--structure-pale);
}
.alerte > .icone { color: var(--structure); margin-top: 1px; }
.alerte__texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.alerte__titre { font-weight: var(--graisse-moyenne); }
.alerte--attention { border-color: var(--attention-trait); background: var(--attention-fond); }
.alerte--attention > .icone { color: var(--attention); }
.alerte--probleme { border-color: var(--probleme-trait); background: var(--probleme-fond); }
.alerte--probleme > .icone { color: var(--probleme); }
.alerte--ok { border-color: var(--ok-trait); background: var(--ok-fond); }
.alerte--ok > .icone { color: var(--ok); }
/* ---------------------------------------------------------------------
Empty state: always with the action that fills it
--------------------------------------------------------------------- */
.vide {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--esp-2);
padding: var(--esp-6) var(--esp-4);
border: var(--trait-fin) dashed var(--trait-fort); border-radius: var(--rayon-l);
color: var(--texte-doux);
}
.vide > .icone { width: 32px; height: 32px; color: var(--structure); margin-bottom: var(--esp-1); }
.vide__titre { color: var(--texte); font-weight: var(--graisse-moyenne); font-size: var(--taille-l); }
.vide .bouton { margin-top: var(--esp-2); }
/* ---------------------------------------------------------------------
Activity list
--------------------------------------------------------------------- */
.activite { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.activite__element { display: flex; gap: var(--esp-3); padding: var(--esp-3) 0; border-bottom: var(--trait-fin) solid var(--trait); }
.activite__element:last-child { border-bottom: 0; }
.activite__texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.activite__quand { color: var(--texte-doux); font-size: var(--taille-xs); white-space: nowrap; }
/* List of clickable rows (to approve, expiring soon...) */
.lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ligne {
display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
padding: var(--esp-3) 0; border-bottom: var(--trait-fin) solid var(--trait);
}
.ligne:last-child { border-bottom: 0; }
.ligne__principal { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.ligne__titre { font-weight: var(--graisse-moyenne); color: var(--texte); }
.ligne__meta { color: var(--texte-doux); font-size: var(--taille-s); }
.vignette {
position: relative; display: block; width: 64px; aspect-ratio: 16 / 9; flex: none; overflow: hidden;
border-radius: var(--rayon-s); background: var(--ecran-fond);
}
.vignette > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* ---------------------------------------------------------------------
Folding details
--------------------------------------------------------------------- */
.repli { border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-l); background: var(--surface); }
.repli > summary {
display: flex; align-items: center; gap: var(--esp-2); list-style: none; cursor: pointer;
padding: var(--esp-3) var(--esp-4); font-weight: var(--graisse-moyenne);
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary .icone--chevron { transition: transform var(--duree); }
.repli[open] > summary .icone--chevron { transform: rotate(90deg); }
.repli__corps { padding: 0 var(--esp-4) var(--esp-4); }
/* ---------------------------------------------------------------------
Drop zone and progress
--------------------------------------------------------------------- */
.depot {
display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); text-align: center;
padding: var(--esp-5) var(--esp-4);
border: 1.5px dashed var(--trait-fort); border-radius: var(--rayon-l);
background: var(--surface-2); color: var(--texte-doux);
}
.depot > .icone { width: 28px; height: 28px; color: var(--structure); }
.depot__titre { color: var(--texte); font-weight: var(--graisse-moyenne); }
.depot[data-survol="true"] { border-color: var(--structure); background: var(--structure-pale); }
.progression { display: flex; flex-direction: column; gap: var(--esp-1); }
.progression__barre { height: 6px; border-radius: var(--rayon-pastille); background: var(--surface-3); overflow: hidden; }
.progression__remplissage { height: 100%; width: var(--valeur, 0%); background: var(--structure); border-radius: inherit; transition: width var(--duree-lente); }
.progression__texte { display: flex; justify-content: space-between; gap: var(--esp-2); font-size: var(--taille-xs); color: var(--texte-doux); }
/* ---------------------------------------------------------------------
Side panel (drawer) and confirmation box: