codevdesign 1.0.55 → 1.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/composants/csqcAide.vue +55 -55
- package/composants/csqcAlerteErreur.vue +87 -87
- package/composants/csqcChaise/chaiseItem.vue +54 -54
- package/composants/csqcConfirmation.vue +75 -75
- package/composants/csqcDate.vue +86 -79
- package/composants/csqcEntete.vue +187 -187
- package/composants/csqcImportCSV.vue +125 -125
- package/composants/csqcSnackbar.vue +207 -207
- package/composants/csqcSwitch.vue +220 -220
- package/composants/csqcTexteBilingue.vue +175 -175
- package/composants/gabarit/csqcMenu.vue +281 -281
- package/modeles/composants/csqcMenuModele.ts +18 -18
- package/modeles/composants/datatableColonne.ts +31 -31
- package/outils/appAxios.ts +116 -116
- package/package.json +2 -2
package/composants/csqcDate.vue
CHANGED
|
@@ -1,79 +1,86 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<v-date-input
|
|
3
|
-
:model-value="dateInterne"
|
|
4
|
-
v-bind="$attrs"
|
|
5
|
-
input-format="yyyy-MM-dd"
|
|
6
|
-
variant="outlined"
|
|
7
|
-
prepend-icon=""
|
|
8
|
-
prepend-inner-icon="$calendar"
|
|
9
|
-
density="comfortable"
|
|
10
|
-
@update:model-value="choixUtilisateur"
|
|
11
|
-
/>
|
|
12
|
-
</template>
|
|
13
|
-
|
|
14
|
-
<script setup lang="ts">
|
|
15
|
-
import { computed, ref } from 'vue'
|
|
16
|
-
import { VDateInput } from 'vuetify/labs/VDateInput'
|
|
17
|
-
|
|
18
|
-
type Model = string | Date | null
|
|
19
|
-
|
|
20
|
-
const props = defineProps<{ modelValue: Model }>()
|
|
21
|
-
|
|
22
|
-
const emit = defineEmits<{
|
|
23
|
-
(e: 'update:modelValue', v: string | null): void
|
|
24
|
-
(e: 'change', v: string | null): void
|
|
25
|
-
}>()
|
|
26
|
-
|
|
27
|
-
// Normalisation, TOUJOURS "YYYY-MM-DD" ou null
|
|
28
|
-
const normalizeToYmd = (v: Date | string | null | undefined): string | null => {
|
|
29
|
-
if (v == null || v === '') return null
|
|
30
|
-
|
|
31
|
-
// Date -> YYYY-MM-DD (local)
|
|
32
|
-
if (v instanceof Date) {
|
|
33
|
-
if (isNaN(v.getTime())) return null
|
|
34
|
-
const yyyy = v.getFullYear()
|
|
35
|
-
const mm = String(v.getMonth() + 1).padStart(2, '0')
|
|
36
|
-
const dd = String(v.getDate()).padStart(2, '0')
|
|
37
|
-
return `${yyyy}-${mm}-${dd}`
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
// String -> accepte seulement YYYY-MM-DD
|
|
41
|
-
const s = String(v).trim()
|
|
42
|
-
const m = s.match(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
return
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
const
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<v-date-input
|
|
3
|
+
:model-value="dateInterne"
|
|
4
|
+
v-bind="$attrs"
|
|
5
|
+
input-format="yyyy-MM-dd"
|
|
6
|
+
variant="outlined"
|
|
7
|
+
prepend-icon=""
|
|
8
|
+
prepend-inner-icon="$calendar"
|
|
9
|
+
density="comfortable"
|
|
10
|
+
@update:model-value="choixUtilisateur"
|
|
11
|
+
/>
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script setup lang="ts">
|
|
15
|
+
import { computed, ref } from 'vue'
|
|
16
|
+
import { VDateInput } from 'vuetify/labs/VDateInput'
|
|
17
|
+
|
|
18
|
+
type Model = string | Date | null
|
|
19
|
+
|
|
20
|
+
const props = defineProps<{ modelValue: Model }>()
|
|
21
|
+
|
|
22
|
+
const emit = defineEmits<{
|
|
23
|
+
(e: 'update:modelValue', v: string | null): void
|
|
24
|
+
(e: 'change', v: string | null): void
|
|
25
|
+
}>()
|
|
26
|
+
|
|
27
|
+
// Normalisation, TOUJOURS "YYYY-MM-DD" ou null
|
|
28
|
+
const normalizeToYmd = (v: Date | string | null | undefined): string | null => {
|
|
29
|
+
if (v == null || v === '') return null
|
|
30
|
+
|
|
31
|
+
// Date -> YYYY-MM-DD (local)
|
|
32
|
+
if (v instanceof Date) {
|
|
33
|
+
if (isNaN(v.getTime())) return null
|
|
34
|
+
const yyyy = v.getFullYear()
|
|
35
|
+
const mm = String(v.getMonth() + 1).padStart(2, '0')
|
|
36
|
+
const dd = String(v.getDate()).padStart(2, '0')
|
|
37
|
+
return `${yyyy}-${mm}-${dd}`
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// String -> accepte seulement YYYY-MM-DD ISO8601 (optionnellement suivi de l'heure, qui est ignorée)
|
|
41
|
+
const s = String(v).trim()
|
|
42
|
+
const m = s.match(
|
|
43
|
+
/^(?<date>(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2}))(?:T\d{2}:\d{2}:\d{2}(?:\.\d{3})?(?:Z|(?:[-+]\d{2}:\d{2}?))?)?$/,
|
|
44
|
+
)
|
|
45
|
+
if (!m) return null
|
|
46
|
+
|
|
47
|
+
// Optionnel: validation simple (évite 2026-99-99)
|
|
48
|
+
const y = Number(m.groups!.year),
|
|
49
|
+
mo = Number(m.groups!.month),
|
|
50
|
+
d = Number(m.groups!.day)
|
|
51
|
+
if (mo < 1 || mo > 12 || d < 1 || d > 31) return null
|
|
52
|
+
if (mo === 2) {
|
|
53
|
+
const isLeap = (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0
|
|
54
|
+
if (d > (isLeap ? 29 : 28)) return null
|
|
55
|
+
}
|
|
56
|
+
if ([4, 6, 9, 11].includes(mo) && d > 30) return null
|
|
57
|
+
|
|
58
|
+
return `${m.groups!.date}`
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// UI: VDateInput stable avec Date|null
|
|
62
|
+
const dateInterne = computed<Date | null>(() => {
|
|
63
|
+
const ymd = normalizeToYmd(props.modelValue as any)
|
|
64
|
+
if (!ymd) return null
|
|
65
|
+
const [y, m, d] = ymd.split('-').map(Number)
|
|
66
|
+
return new Date(y, m - 1, d) // local, stable
|
|
67
|
+
})
|
|
68
|
+
|
|
69
|
+
const prevBeforeEmit = ref<string | null>(null)
|
|
70
|
+
|
|
71
|
+
const choixUtilisateur = (v: Date | string | null) => {
|
|
72
|
+
const next = normalizeToYmd(v)
|
|
73
|
+
const current = normalizeToYmd(props.modelValue as any)
|
|
74
|
+
|
|
75
|
+
// rollback: on reçoit l'ancienne valeur (celle qu'on avait avant)
|
|
76
|
+
if (prevBeforeEmit.value && next === prevBeforeEmit.value && current !== prevBeforeEmit.value) {
|
|
77
|
+
return
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
if (next === current) return
|
|
81
|
+
|
|
82
|
+
prevBeforeEmit.value = current
|
|
83
|
+
emit('update:modelValue', next)
|
|
84
|
+
emit('change', next)
|
|
85
|
+
}
|
|
86
|
+
</script>
|
|
@@ -1,187 +1,187 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<v-app-bar
|
|
3
|
-
:color="barreCouleur"
|
|
4
|
-
class="px-0 mx-0"
|
|
5
|
-
:style="{
|
|
6
|
-
position: 'sticky',
|
|
7
|
-
// variables CSS pour les couleurs dynamiques
|
|
8
|
-
'--entete-texte': texteCouleur,
|
|
9
|
-
'--entete-icone': iconeCouleur,
|
|
10
|
-
}"
|
|
11
|
-
height="82px"
|
|
12
|
-
>
|
|
13
|
-
<v-row
|
|
14
|
-
class="pt-2"
|
|
15
|
-
@resize="controlAffichage"
|
|
16
|
-
>
|
|
17
|
-
<v-col
|
|
18
|
-
:cols="titreCol"
|
|
19
|
-
class="pr-0 mr-0 pl-5"
|
|
20
|
-
>
|
|
21
|
-
<v-toolbar-title class="titre">
|
|
22
|
-
<div class="entete-ligne">
|
|
23
|
-
<!-- GAUCHE -->
|
|
24
|
-
<div class="entete-gauche">
|
|
25
|
-
<!-- Barre de retour -->
|
|
26
|
-
<slot name="retour">
|
|
27
|
-
<v-icon
|
|
28
|
-
v-if="retour"
|
|
29
|
-
size="large"
|
|
30
|
-
start
|
|
31
|
-
:color="iconeCouleur"
|
|
32
|
-
icon="mdi-arrow-left-thin"
|
|
33
|
-
@click="retournerMenu"
|
|
34
|
-
/>
|
|
35
|
-
</slot>
|
|
36
|
-
|
|
37
|
-
<div class="titre-bloc">
|
|
38
|
-
<slot name="titre">
|
|
39
|
-
<span class="pl-3 titre-texte">{{ props.titre }}</span>
|
|
40
|
-
</slot>
|
|
41
|
-
|
|
42
|
-
<slot name="etat">
|
|
43
|
-
<span
|
|
44
|
-
v-if="monEtat?.afficher"
|
|
45
|
-
class="pl-10"
|
|
46
|
-
>
|
|
47
|
-
<v-btn
|
|
48
|
-
size="small"
|
|
49
|
-
:color="monEtat.couleur"
|
|
50
|
-
variant="tonal"
|
|
51
|
-
>
|
|
52
|
-
{{ monEtat.texte }}
|
|
53
|
-
</v-btn>
|
|
54
|
-
</span>
|
|
55
|
-
</slot>
|
|
56
|
-
|
|
57
|
-
<slot name="etatSecondaire">
|
|
58
|
-
<span
|
|
59
|
-
v-if="monEtatSecondaire?.afficher"
|
|
60
|
-
class="pl-3"
|
|
61
|
-
>
|
|
62
|
-
<v-btn
|
|
63
|
-
size="small"
|
|
64
|
-
:color="monEtatSecondaire.couleur"
|
|
65
|
-
variant="tonal"
|
|
66
|
-
>
|
|
67
|
-
{{ monEtatSecondaire.texte }}
|
|
68
|
-
</v-btn>
|
|
69
|
-
</span>
|
|
70
|
-
</slot>
|
|
71
|
-
|
|
72
|
-
<slot name="soustitre">
|
|
73
|
-
<span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
|
|
74
|
-
</slot>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
|
-
|
|
78
|
-
<!-- DROITE -->
|
|
79
|
-
<div class="entete-droite">
|
|
80
|
-
<slot name="droite" />
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
</v-toolbar-title>
|
|
84
|
-
</v-col>
|
|
85
|
-
</v-row>
|
|
86
|
-
|
|
87
|
-
<!-- Barre en bas -->
|
|
88
|
-
<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
|
|
89
|
-
</v-app-bar>
|
|
90
|
-
</template>
|
|
91
|
-
|
|
92
|
-
<script setup lang="ts">
|
|
93
|
-
import { useRouter } from 'vue-router'
|
|
94
|
-
import { ref, computed } from 'vue'
|
|
95
|
-
|
|
96
|
-
interface EnteteEtat {
|
|
97
|
-
afficher: boolean
|
|
98
|
-
couleur: string
|
|
99
|
-
texte: string
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
interface EnteteEtatSecondaire {
|
|
103
|
-
afficher: boolean
|
|
104
|
-
couleur: string
|
|
105
|
-
texte: string
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
const router = useRouter()
|
|
109
|
-
|
|
110
|
-
const props = defineProps<{
|
|
111
|
-
titre: string
|
|
112
|
-
soustitre?: string
|
|
113
|
-
retour?: string
|
|
114
|
-
etat?: EnteteEtat
|
|
115
|
-
couleur?: string // couleur de la barre (Vuetify color/hex)
|
|
116
|
-
couleurTexte?: string
|
|
117
|
-
couleurIcone?: string
|
|
118
|
-
etatSecondaire?: EnteteEtatSecondaire
|
|
119
|
-
}>()
|
|
120
|
-
|
|
121
|
-
const titreCol = ref(12)
|
|
122
|
-
|
|
123
|
-
// Fallbacks (tes valeurs actuelles)
|
|
124
|
-
const barreCouleur = computed(() => props.couleur ?? 'white')
|
|
125
|
-
const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
|
|
126
|
-
const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
|
|
127
|
-
|
|
128
|
-
const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
|
|
129
|
-
const monEtatSecondaire = computed<EnteteEtatSecondaire>(
|
|
130
|
-
() => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
|
|
131
|
-
)
|
|
132
|
-
|
|
133
|
-
function retournerMenu() {
|
|
134
|
-
if (props.retour) router.push({ name: props.retour })
|
|
135
|
-
}
|
|
136
|
-
function controlAffichage() {
|
|
137
|
-
/* logique resize */
|
|
138
|
-
}
|
|
139
|
-
</script>
|
|
140
|
-
|
|
141
|
-
<style scoped>
|
|
142
|
-
.titre {
|
|
143
|
-
font-size: 1.85rem;
|
|
144
|
-
font-weight: bold;
|
|
145
|
-
margin-bottom: 15px;
|
|
146
|
-
}
|
|
147
|
-
.titre-texte {
|
|
148
|
-
color: var(--entete-texte, #223654);
|
|
149
|
-
}
|
|
150
|
-
.soustitre-texte {
|
|
151
|
-
display: block;
|
|
152
|
-
font-size: 1rem;
|
|
153
|
-
font-weight: normal;
|
|
154
|
-
color: var(--entete-texte, #223654);
|
|
155
|
-
}
|
|
156
|
-
.titre-bloc {
|
|
157
|
-
display: inline-block;
|
|
158
|
-
vertical-align: middle;
|
|
159
|
-
padding-left: 12px;
|
|
160
|
-
}
|
|
161
|
-
/* Couleur de l’icône (retour) + hover */
|
|
162
|
-
.v-icon {
|
|
163
|
-
color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
|
|
164
|
-
}
|
|
165
|
-
.v-icon:hover {
|
|
166
|
-
filter: brightness(0.85);
|
|
167
|
-
}
|
|
168
|
-
.entete-ligne {
|
|
169
|
-
display: flex;
|
|
170
|
-
align-items: center;
|
|
171
|
-
width: 100%;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.entete-gauche {
|
|
175
|
-
display: flex;
|
|
176
|
-
align-items: center;
|
|
177
|
-
min-width: 0; /* important pour éviter overflow */
|
|
178
|
-
flex: 1;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.entete-droite {
|
|
182
|
-
display: flex;
|
|
183
|
-
align-items: center;
|
|
184
|
-
gap: 12px;
|
|
185
|
-
padding-right: 16px;
|
|
186
|
-
}
|
|
187
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<v-app-bar
|
|
3
|
+
:color="barreCouleur"
|
|
4
|
+
class="px-0 mx-0"
|
|
5
|
+
:style="{
|
|
6
|
+
position: 'sticky',
|
|
7
|
+
// variables CSS pour les couleurs dynamiques
|
|
8
|
+
'--entete-texte': texteCouleur,
|
|
9
|
+
'--entete-icone': iconeCouleur,
|
|
10
|
+
}"
|
|
11
|
+
height="82px"
|
|
12
|
+
>
|
|
13
|
+
<v-row
|
|
14
|
+
class="pt-2"
|
|
15
|
+
@resize="controlAffichage"
|
|
16
|
+
>
|
|
17
|
+
<v-col
|
|
18
|
+
:cols="titreCol"
|
|
19
|
+
class="pr-0 mr-0 pl-5"
|
|
20
|
+
>
|
|
21
|
+
<v-toolbar-title class="titre">
|
|
22
|
+
<div class="entete-ligne">
|
|
23
|
+
<!-- GAUCHE -->
|
|
24
|
+
<div class="entete-gauche">
|
|
25
|
+
<!-- Barre de retour -->
|
|
26
|
+
<slot name="retour">
|
|
27
|
+
<v-icon
|
|
28
|
+
v-if="retour"
|
|
29
|
+
size="large"
|
|
30
|
+
start
|
|
31
|
+
:color="iconeCouleur"
|
|
32
|
+
icon="mdi-arrow-left-thin"
|
|
33
|
+
@click="retournerMenu"
|
|
34
|
+
/>
|
|
35
|
+
</slot>
|
|
36
|
+
|
|
37
|
+
<div class="titre-bloc">
|
|
38
|
+
<slot name="titre">
|
|
39
|
+
<span class="pl-3 titre-texte">{{ props.titre }}</span>
|
|
40
|
+
</slot>
|
|
41
|
+
|
|
42
|
+
<slot name="etat">
|
|
43
|
+
<span
|
|
44
|
+
v-if="monEtat?.afficher"
|
|
45
|
+
class="pl-10"
|
|
46
|
+
>
|
|
47
|
+
<v-btn
|
|
48
|
+
size="small"
|
|
49
|
+
:color="monEtat.couleur"
|
|
50
|
+
variant="tonal"
|
|
51
|
+
>
|
|
52
|
+
{{ monEtat.texte }}
|
|
53
|
+
</v-btn>
|
|
54
|
+
</span>
|
|
55
|
+
</slot>
|
|
56
|
+
|
|
57
|
+
<slot name="etatSecondaire">
|
|
58
|
+
<span
|
|
59
|
+
v-if="monEtatSecondaire?.afficher"
|
|
60
|
+
class="pl-3"
|
|
61
|
+
>
|
|
62
|
+
<v-btn
|
|
63
|
+
size="small"
|
|
64
|
+
:color="monEtatSecondaire.couleur"
|
|
65
|
+
variant="tonal"
|
|
66
|
+
>
|
|
67
|
+
{{ monEtatSecondaire.texte }}
|
|
68
|
+
</v-btn>
|
|
69
|
+
</span>
|
|
70
|
+
</slot>
|
|
71
|
+
|
|
72
|
+
<slot name="soustitre">
|
|
73
|
+
<span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
|
|
74
|
+
</slot>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<!-- DROITE -->
|
|
79
|
+
<div class="entete-droite">
|
|
80
|
+
<slot name="droite" />
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</v-toolbar-title>
|
|
84
|
+
</v-col>
|
|
85
|
+
</v-row>
|
|
86
|
+
|
|
87
|
+
<!-- Barre en bas -->
|
|
88
|
+
<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
|
|
89
|
+
</v-app-bar>
|
|
90
|
+
</template>
|
|
91
|
+
|
|
92
|
+
<script setup lang="ts">
|
|
93
|
+
import { useRouter } from 'vue-router'
|
|
94
|
+
import { ref, computed } from 'vue'
|
|
95
|
+
|
|
96
|
+
interface EnteteEtat {
|
|
97
|
+
afficher: boolean
|
|
98
|
+
couleur: string
|
|
99
|
+
texte: string
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
interface EnteteEtatSecondaire {
|
|
103
|
+
afficher: boolean
|
|
104
|
+
couleur: string
|
|
105
|
+
texte: string
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
const router = useRouter()
|
|
109
|
+
|
|
110
|
+
const props = defineProps<{
|
|
111
|
+
titre: string
|
|
112
|
+
soustitre?: string
|
|
113
|
+
retour?: string
|
|
114
|
+
etat?: EnteteEtat
|
|
115
|
+
couleur?: string // couleur de la barre (Vuetify color/hex)
|
|
116
|
+
couleurTexte?: string
|
|
117
|
+
couleurIcone?: string
|
|
118
|
+
etatSecondaire?: EnteteEtatSecondaire
|
|
119
|
+
}>()
|
|
120
|
+
|
|
121
|
+
const titreCol = ref(12)
|
|
122
|
+
|
|
123
|
+
// Fallbacks (tes valeurs actuelles)
|
|
124
|
+
const barreCouleur = computed(() => props.couleur ?? 'white')
|
|
125
|
+
const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
|
|
126
|
+
const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
|
|
127
|
+
|
|
128
|
+
const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
|
|
129
|
+
const monEtatSecondaire = computed<EnteteEtatSecondaire>(
|
|
130
|
+
() => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
|
|
131
|
+
)
|
|
132
|
+
|
|
133
|
+
function retournerMenu() {
|
|
134
|
+
if (props.retour) router.push({ name: props.retour })
|
|
135
|
+
}
|
|
136
|
+
function controlAffichage() {
|
|
137
|
+
/* logique resize */
|
|
138
|
+
}
|
|
139
|
+
</script>
|
|
140
|
+
|
|
141
|
+
<style scoped>
|
|
142
|
+
.titre {
|
|
143
|
+
font-size: 1.85rem;
|
|
144
|
+
font-weight: bold;
|
|
145
|
+
margin-bottom: 15px;
|
|
146
|
+
}
|
|
147
|
+
.titre-texte {
|
|
148
|
+
color: var(--entete-texte, #223654);
|
|
149
|
+
}
|
|
150
|
+
.soustitre-texte {
|
|
151
|
+
display: block;
|
|
152
|
+
font-size: 1rem;
|
|
153
|
+
font-weight: normal;
|
|
154
|
+
color: var(--entete-texte, #223654);
|
|
155
|
+
}
|
|
156
|
+
.titre-bloc {
|
|
157
|
+
display: inline-block;
|
|
158
|
+
vertical-align: middle;
|
|
159
|
+
padding-left: 12px;
|
|
160
|
+
}
|
|
161
|
+
/* Couleur de l’icône (retour) + hover */
|
|
162
|
+
.v-icon {
|
|
163
|
+
color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
|
|
164
|
+
}
|
|
165
|
+
.v-icon:hover {
|
|
166
|
+
filter: brightness(0.85);
|
|
167
|
+
}
|
|
168
|
+
.entete-ligne {
|
|
169
|
+
display: flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
width: 100%;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.entete-gauche {
|
|
175
|
+
display: flex;
|
|
176
|
+
align-items: center;
|
|
177
|
+
min-width: 0; /* important pour éviter overflow */
|
|
178
|
+
flex: 1;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.entete-droite {
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
gap: 12px;
|
|
185
|
+
padding-right: 16px;
|
|
186
|
+
}
|
|
187
|
+
</style>
|