← blocGroupe conservé pour TS
LE conteneur de contenu Régie (décision PO 2026-07-18) : toute boîte
« titre + texte + actions » adopte ce composant — cartes du catalogue de
scénarios, blocs de la page Modifier, blocs d'onglet. Zones optionnelles ;
les contextes n'apportent que des modificateurs (couleur, largeur).
Modificateurs de catégorie (couleurs d'icône) :
- .blocGroupes (ou .blocGroupe pour compat TS)
- .blocDistributions
- .blocTelecharger
- .blocGroupe (mode test, compat TS)
============================================ */
/* ══════════════════════════════════════
CONTENEUR PRINCIPAL
══════════════════════════════════════ */
.bloc {
display: flex;
align-items: stretch;
max-width: 600px;
background: var(--cBlanc);
border: var(--borderForm);
border-radius: var(--borderR1);
overflow: hidden;
transition: box-shadow 0.2s;
}
/* ══════════════════════════════════════
ZONE ICÔNE (wrapper uniquement)
Le style des img/svg et les couleurs de fond
par catégorie sont centralisés dans 54_icones.css
══════════════════════════════════════ */
.blocIcone {
display: flex;
justify-content: flex-start;
padding: 0 4px 0 0;
}
/* ══════════════════════════════════════
ZONE CONTENU
══════════════════════════════════════ */
.blocCorps {
flex: 1;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: var(--gapReduit);
}
.blocTitre {
font: var(--fH4);
color: var(--cNoir1);
margin: 0;
}
.blocTexte {
font: var(--fText16);
color: var(--cNoir3);
margin: 0;
}
/* inutilisé 2026-06-13
.blocSousTitre {
font: var(--fMenu14);
color: var(--cNoir3);
}
*/
/* ══════════════════════════════════════
ZONE ACTIONS
══════════════════════════════════════ */
.blocActions {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: var(--gapDefaut);
padding: 16px 20px;
border-left: var(--border);
min-width: 240px;
}
.blocActions .toggleAvecLabel {
justify-content: space-between;
}
/* ══════════════════════════════════════
STATS (nombre + label)
══════════════════════════════════════ */
.blocStats {
display: flex;
align-items: baseline;
gap: var(--gapDefaut); /* aligné 6 -> 8px (échelle PO 2026-07-18) */
margin-top: 4px;
}
.blocNombre {
font: var(--fMono24b);
color: var(--cNoir1);
}
.blocLabel {
font: var(--fText16);
color: var(--cNoir3);
}
/* ══════════════════════════════════════
COMPTEUR (gros chiffre avec séparateur)
══════════════════════════════════════ */
.blocCompteur {
display: flex;
align-items: baseline;
gap: var(--gapDefaut);
}
.compteurValeur {
font: var(--fMono24b);
color: var(--cNoir1);
}
.compteurReste {
display: flex;
align-items: baseline;
gap: var(--gapDefaut);
}
/* display:flex écraserait l'attribut hidden → on le rétablit explicitement. */
.compteurReste[hidden] {
display: none;
}
.compteurSeparateur {
font: var(--fH3);
color: var(--cNoir4);
}
.compteurLabel {
font: var(--fText16);
color: var(--cNoir3);
}
/* ══════════════════════════════════════
DATE / INFO SECONDAIRE
══════════════════════════════════════ */
.blocDate /*, .blocTest (inutilisé 2026-06-13) */, .blocReferences {
font: var(--fLight14);
color: var(--cNoir1);
margin-top: auto;
}
/* Infos secondaires empilées en bas de carte : seule la première prend l'espace libre */
.blocReferences + .blocReferences,
.blocReferences + .blocDate {
margin-top: 0;
}
/* inutilisé 2026-06-13
.blocTest {
color: var(--cTest3);
}
*/
/* ══════════════════════════════════════
LISTE D'ITEMS (lots)
══════════════════════════════════════ */
.blocListe {
list-style: none;
margin: 12px 0 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--gapDefaut);
}
.blocItem {
display: flex;
align-items: center;
gap: var(--gapMoyen);
padding: 8px 12px;
background: var(--cBlanc02);
border-radius: var(--borderR1);
}
.blocItemImage {
width: 32px;
height: 32px;
object-fit: cover;
border-radius: var(--borderR1);
}
.blocItemLabel {
flex: 1;
font: var(--fText16);
color: var(--cNoir1);
}
.blocItemStock {
font: var(--fText16);
color: var(--cNoir1);
}
.panneauFormulaire form > div.blocVertical,
.sectionFormulaire > div.blocVertical {
display: flex;
flex-direction: column;
gap: var(--gapMoyen); /* aligné 10 -> 12px (échelle PO 2026-07-18) */
padding: 15px 0;
margin: 30px 20px 30px;
border-top: var(--border);
}
/* Dans une section canonique, le retrait horizontal est porté par la section elle-même */
.sectionFormulaire > div.blocVertical {
margin: 15px 0 12px;
}
/* ══════════════════════════════════════
RÉORDONNANCEMENT (poignée + flèches)
══════════════════════════════════════ */
.listeOrdrePoignee {
width: 14px;
color: var(--cNoir4);
cursor: grab;
}
.listeOrdrePoignee:active {
cursor: grabbing;
}
.divActionClasser {
display: flex;
gap: var(--gapReduit);
margin-left: auto;
}
/* Petit bouton icône compact (flèches, +/−, etc.) */
.miniAction {
background: none;
border: var(--border);
border-radius: var(--borderR1);
cursor: pointer;
padding: 2px 8px;
font: var(--fLabel);
color: var(--cNoir1);
}
.miniAction:disabled {
opacity: 0.3;
cursor: default;
}
.miniAction:not(:disabled):hover {
background: var(--cBlanc02);
}
.listeOrdreItem.dragging {
opacity: 0.3;
}
/* ══════════════════════════════════════
RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 600px) {
.bloc {
flex-direction: column;
}
.blocActions {
flex-direction: column;
align-items: flex-end;
border-left: none;
border-top: var(--border);
padding: 12px 20px;
}
}
/*!*****************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[1].use[1]!./assets/noyau/css/regie/54_icones.css ***!
\*****************************************************************************************************************************/
/* ============================================
ICÔNES - Styles pour les briques et les blocs
============================================
Ce fichier centralise le style visuel des icônes
utilisées à la fois dans :
- les briques du menu d'ajout (.briqueIcone sur img/svg)
- les blocs de résumé (img/svg dans .blocIcone)
Le wrapper .blocIcone lui-même (flex, padding) reste
dans 53_blocs.css car c'est de la structure de composant.
============================================ */
/* Style de base */
.briqueIcone,
.blocIcone img,
.blocIcone svg {
width: 64px;
height: 64px;
padding: 6px;
object-fit: contain;
border-radius: var(--borderR1);
box-sizing: border-box;
}
/* ============================================
FONDS PAR CATÉGORIE
============================================ */
.briqueGroupes .briqueIcone,
.blocGroupe .blocIcone img,
.blocGroupe .blocIcone svg,
.blocTelecharger .blocIcone img,
.blocTelecharger .blocIcone svg { background: var(--cFondGroupes); }
.briqueDistributions .briqueIcone,
.blocDistribution .blocIcone img,
.blocDistribution .blocIcone svg { background: var(--cFondDistributions); }
.briqueConfigurations .briqueIcone,
.briqueConfig .briqueIcone { background: var(--cFondConfig); }
.briqueScenes .briqueIcone { background: var(--cFondScenes); }
.briqueAffichages .briqueIcone { background: var(--cFondAffichages); }
/* ============================================
ICÔNE D'UN SCÉNARIO
============================================
Toujours à DROITE, et SANS fond (décision PO 2026-07-31) : les fonds ci-dessus
codent une catégorie de brique, un scénario n'en a aucune.
Le SVG est inliné (iconeScenario), pas en ...
...
...
...