@dnax/ui 0.0.11 → 0.0.12

package/components/QBottomSheetFooter.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
-// QBottomSheetFooter — zone d'actions en bas du panneau (équivalent DrawerFooter).
+// QBottomSheetFooter — pied du panneau façon barre d'app (équivalent QFooter) :
+// les actions sont embarquées dans un <q-toolbar> (min-height 50px, padding
+// 0 12px) et alignées à droite (justify-content: flex-end — styles/main.css).
+import QToolbar from "./QToolbar.vue"
 </script>
 
 <template>
   <div class="q-bottom-sheet__footer">
-    <slot />
+    <q-toolbar>
+      <slot />
+    </q-toolbar>
   </div>
 </template>

package/components/QBottomSheetHeader.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-// QBottomSheetHeader — header du panneau : titre + description + bouton fermer (équivalent DrawerHeader/DrawerTitle).
+// QBottomSheetHeader — header du panneau façon barre d'app (équivalent QHeader) :
+// le contenu est embarqué dans un <q-toolbar> (min-height 50px, padding 0 12px),
+// avec titre + description + bouton fermer (équivalent DrawerHeader/DrawerTitle).
 import { inject } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { qBottomSheetKey } from "./QBottomSheet.vue"
+import QToolbar from "./QToolbar.vue"
+import QSpace from "./QSpace.vue"
 
 interface Props {
   title?: string
@@ -16,20 +20,23 @@ const sheet = inject(qBottomSheetKey, null)
 
 <template>
   <div class="q-bottom-sheet__header">
-    <div class="q-bottom-sheet__header-text">
-      <h2 v-if="title" class="q-bottom-sheet__title">{{ title }}</h2>
-      <slot name="title" />
-      <p v-if="description" class="q-bottom-sheet__description">{{ description }}</p>
-      <slot name="description" />
-    </div>
-    <button
-      type="button"
-      class="q-bottom-sheet__close"
-      aria-label="Fermer"
-      @click="sheet?.setOpen(false)"
-    >
-      <Icon :icon="icons.x" aria-hidden="true" />
-    </button>
-    <slot />
+    <q-toolbar>
+      <div class="q-bottom-sheet__header-text">
+        <h2 v-if="title" class="q-bottom-sheet__title">{{ title }}</h2>
+        <slot name="title" />
+        <p v-if="description" class="q-bottom-sheet__description">{{ description }}</p>
+        <slot name="description" />
+      </div>
+      <q-space />
+      <button
+        type="button"
+        class="q-bottom-sheet__close"
+        aria-label="Fermer"
+        @click="sheet?.setOpen(false)"
+      >
+        <Icon :icon="icons.x" aria-hidden="true" />
+      </button>
+      <slot />
+    </q-toolbar>
   </div>
 </template>

package/components/QContainer.vue

@@ -38,6 +38,19 @@ interface Props {
   waveColor?: string
   /** Couleur de la seconde vague (background-effect="wave", défaut violet) */
   waveColor2?: string
+  /** Style glassmorphism : fond translucide + flou d'arrière-plan + bordure claire */
+  glass?: boolean
+  /** URL d'une image de fond — rendue en couche derrière le contenu (cover) */
+  backgroundImage?: string
+  /** Taille de l'image : cover | contain | fill | none | scale-down, ou valeur
+   *  CSS ("50%", "400px" → boîte centrée, image entière visible) */
+  backgroundImageSize?: string
+  /** Anime l'image de fond (Ken Burns indéterminé : zoom + panoramique lents en boucle) */
+  backgroundAnimated?: boolean
+  /** Direction de la boucle Ken Burns : alternate (défaut) | alternate-reverse | normal | reverse */
+  backgroundAnimationDirection?: "alternate" | "alternate-reverse" | "normal" | "reverse"
+  /** Durée d'une itération du Ken Burns (défaut 24s) */
+  backgroundAnimationDuration?: string
   class?: string
 }
 
@@ -47,6 +60,13 @@ const props = withDefaults(defineProps<Props>(), {
   padding: "16px",
 })
 
+const IMG_FIT = new Set(["cover", "contain", "fill", "none", "scale-down"])
+
+// Taille CSS libre ("50%", "400px"…) → boîte centrée (object-fit: contain)
+const imgSized = computed(
+  () => !!props.backgroundImageSize && !IMG_FIT.has(props.backgroundImageSize),
+)
+
 const containerStyle = computed<Record<string, string>>(() => {
   const style: Record<string, string> = {
     "--q-container-max": typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth,
@@ -61,6 +81,18 @@ const containerStyle = computed<Record<string, string>>(() => {
   if (props.auroraColor2) style["--q-aurora-color-2"] = props.auroraColor2
   if (props.waveColor) style["--q-wave-color"] = props.waveColor
   if (props.waveColor2) style["--q-wave-color-2"] = props.waveColor2
+  if (props.backgroundImageSize && IMG_FIT.has(props.backgroundImageSize)) {
+    style["--q-container-img-fit"] = props.backgroundImageSize
+  }
+  if (imgSized.value && props.backgroundImageSize) {
+    style["--q-container-img-size"] = props.backgroundImageSize
+  }
+  if (props.backgroundAnimationDirection) {
+    style["--q-container-kenburns-direction"] = props.backgroundAnimationDirection
+  }
+  if (props.backgroundAnimationDuration) {
+    style["--q-container-kenburns-duration"] = props.backgroundAnimationDuration
+  }
   return style
 })
 
@@ -68,7 +100,8 @@ const containerClasses = computed(() =>
   cn(
     "q-container",
     props.fluid && "q-container--fluid",
-    props.backgroundEffect && "q-container--bg",
+    (props.backgroundEffect || props.backgroundImage) && "q-container--bg",
+    props.glass && "q-container--glass",
     props.class,
   ),
 )
@@ -145,6 +178,19 @@ onBeforeUnmount(() => rootEl.value?.removeEventListener("mousemove", onMouseMove
 
 <template>
   <div ref="rootEl" class="q-container" :class="containerClasses" :style="containerStyle">
+    <img
+      v-if="backgroundImage"
+      :src="backgroundImage"
+      class="q-container__img"
+      :class="{
+        'q-container__img--glass': glass,
+        'q-container__img--animated': backgroundAnimated,
+        'q-container__img--sized': imgSized,
+      }"
+      alt=""
+      aria-hidden="true"
+      draggable="false"
+    />
     <div
       v-if="backgroundEffect"
       class="q-container__bg"

package/components/QDialogContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// QDialogContent — section de corps de la modale (équivalent QCardSection).
+// Le panneau <q-dialog> est en flex-column (max-height 90vh) : avec `scrollable`,
+// le corps prend l'espace restant et défile en interne, entre un header et un
+// footer fixes (essentiel en mode maximized, où le panneau est overflow: hidden).
+interface Props {
+  /** Rendu scrollable : le corps défile entre header et footer fixes */
+  scrollable?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  scrollable: false,
+})
+</script>
+
+<template>
+  <div class="q-dialog__body" :class="{ 'q-dialog__body--scrollable': scrollable }">
+    <slot />
+  </div>
+</template>

package/components/QDialogFooter.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
-// QDialogFooter — zone d'actions en bas de la modale (équivalent DialogFooter).
+// QDialogFooter — pied de la modale façon barre d'app (équivalent QFooter) :
+// les actions sont embarquées dans un <q-toolbar> (min-height 50px, padding
+// 0 12px) et alignées à droite (justify-content: flex-end — styles/main.css).
+import QToolbar from "./QToolbar.vue"
 </script>
 
 <template>
   <div class="q-dialog__footer">
-    <slot />
+    <q-toolbar>
+      <slot />
+    </q-toolbar>
   </div>
 </template>

package/components/QDialogHeader.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-// QDialogHeader — header de la modale : titre + description + bouton fermer (équivalent DialogHeader/Title/Close).
+// QDialogHeader — header de la modale façon barre d'app (équivalent QHeader) :
+// le contenu est embarqué dans un <q-toolbar> (min-height 50px, padding 0 12px),
+// avec titre + description + bouton fermer (équivalent DialogHeader/Title/Close).
 import { inject } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { qDialogKey } from "./QDialog.vue"
+import QToolbar from "./QToolbar.vue"
+import QSpace from "./QSpace.vue"
 
 interface Props {
   title?: string
@@ -21,21 +25,24 @@ const dialog = inject(qDialogKey, null)
 
 <template>
   <div class="q-dialog__header">
-    <div class="q-dialog__header-text">
-      <h2 v-if="title" class="q-dialog__title">{{ title }}</h2>
-      <slot name="title" />
-      <p v-if="description" class="q-dialog__description">{{ description }}</p>
-      <slot name="description" />
-    </div>
-    <button
-      v-if="showClose"
-      type="button"
-      class="q-dialog__close"
-      aria-label="Fermer"
-      @click="dialog?.setOpen(false)"
-    >
-      <Icon :icon="icons.x" aria-hidden="true" />
-    </button>
-    <slot />
+    <q-toolbar>
+      <div class="q-dialog__header-text">
+        <h2 v-if="title" class="q-dialog__title">{{ title }}</h2>
+        <slot name="title" />
+        <p v-if="description" class="q-dialog__description">{{ description }}</p>
+        <slot name="description" />
+      </div>
+      <q-space />
+      <button
+        v-if="showClose"
+        type="button"
+        class="q-dialog__close"
+        aria-label="Fermer"
+        @click="dialog?.setOpen(false)"
+      >
+        <Icon :icon="icons.x" aria-hidden="true" />
+      </button>
+      <slot />
+    </q-toolbar>
   </div>
 </template>

package/components/QFooter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // QFooter — barre basse (safe-area bottom appliquée par styles/main.css : .q-app .q-footer)
 import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import { useFixedBarOffset } from "../lib/fixedLayout"
 
 interface Props {
   /** Fixe la barre en bas de l'écran (sort du flux) */
@@ -24,6 +25,11 @@ const props = withDefaults(defineProps<Props>(), {
   bordered: false,
 })
 
+const rootEl = ref<HTMLElement | null>(null)
+
+// Empilement : bottom = hauteur cumulée des footers fixed suivants (si fixed)
+useFixedBarOffset(rootEl, "bar-bottom", () => props.fixed)
+
 const translucentStyle = computed<Record<string, string> | undefined>(() =>
   props.translucent === true || typeof props.translucent === "number"
     ? { "--q-translucent-opacity": `${typeof props.translucent === "number" ? props.translucent : 70}%` }
@@ -55,6 +61,7 @@ onBeforeUnmount(() => {
 
 <template>
   <footer
+    ref="rootEl"
     class="q-footer"
     :class="{
       'q-footer--fixed': fixed,

package/components/QPage.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 // QPage — zone de contenu. Prop `virtual` : active le virtual scroll
 // (rendu fenêtré via QVirtualScroll) quand on a beaucoup d'items.
-// Padding-top automatique quand des barres fixed (q-header / q-back-header)
-// précèdent la page : le contenu reste sous les barres (jamais masqué).
+// Padding-top/padding-bottom automatiques quand des barres fixed
+// (q-header / q-back-header avant, q-footer après) entourent la page : le
+// contenu reste visible, jamais masqué par les barres au scroll.
 import { onBeforeUnmount, onMounted, ref } from "vue"
 import { useFixedBarOffset } from "../lib/fixedLayout"
 import QVirtualScroll from "./QVirtualScroll.vue"

package/components/QTab.vue

@@ -95,9 +95,11 @@ const tabClasses = computed(() =>
     isActive.value && tabs?.activeClass.value,
     (props.noCaps || tabs?.noCaps.value) && "q-tab--no-caps",
     props.disable && "q-tab--disabled",
-    tabs?.inlineLabel.value && "q-tab--inline-label",
+    // Mode replié : le label s'étend à droite de l'icône → forcer l'inline-label
+    // (et neutraliser le padding stacked-icon + le fallback :has) */
+    (tabs?.inlineLabel.value || tabs?.collapseInactive.value) && "q-tab--inline-label",
     // Icône empilée au-dessus du label : padding vertical pour l'aérer du cadre
-    props.icon && !tabs?.inlineLabel.value && "q-tab--stacked-icon",
+    props.icon && !tabs?.inlineLabel.value && !tabs?.collapseInactive.value && "q-tab--stacked-icon",
   ),
 )
 

package/components/QTabs.vue

@@ -16,6 +16,8 @@ export interface QTabContext {
   inlineLabel: Readonly<Ref<boolean>>
   noCaps: Readonly<Ref<boolean>>
   activeClass: Readonly<Ref<string | undefined>>
+  /** Mode replié : seul le tab actif montre icône + label (les autres : icône seule) */
+  collapseInactive: Readonly<Ref<boolean>>
 }
 
 export const qTabsKey: InjectionKey<QTabContext> = Symbol("q-tabs")
@@ -49,6 +51,8 @@ interface Props {
   activeColor?: string
   /** Couleur de fond du tab actif */
   activeBgColor?: string
+  /** Couleur des tabs inactifs (token ou hex — défaut : couleur héritée) */
+  inactiveColor?: string
   /** Classe ajoutée au tab actif */
   activeClass?: string
   /** Couleur de l'indicateur (défaut : activeColor → primary) */
@@ -74,6 +78,19 @@ interface Props {
   contentClass?: string
   /** Anime les tabs au clic (appui scale + pop du tab actif) */
   animated?: boolean
+  /**
+   * Transition du changement de tab (requiert `animated`) :
+   * spring (défaut, rebond léger) | smooth (expo-out velouté, label qui monte)
+   * | elastic (rebond marqué).
+   */
+  transition?: "spring" | "smooth" | "elastic"
+  /** Durée des transitions en ms (indicateur, labels collapse, pop/rise) */
+  transitionDuration?: number
+  /**
+   * Mode replié (pattern mobile) : les tabs inactifs n'affichent que l'icône ;
+   * le tab actif s'étend (icône + label) avec une largeur animée.
+   */
+  collapseInactive?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -81,6 +98,7 @@ const props = withDefaults(defineProps<Props>(), {
   align: "center",
   activeColor: "",
   activeBgColor: "",
+  inactiveColor: "",
   activeClass: "",
   indicatorColor: "",
   dense: false,
@@ -92,6 +110,9 @@ const props = withDefaults(defineProps<Props>(), {
   stretch: false,
   contentClass: "",
   animated: false,
+  transition: "spring",
+  transitionDuration: undefined,
+  collapseInactive: false,
 })
 
 const emit = defineEmits<{ "update:modelValue": [value: string | number | null] }>()
@@ -107,6 +128,7 @@ const indicatorPos = computed<"top" | "bottom" | "none">(() => {
 // shallowRef : on ne veut PAS que Vue dé-unwrappe les Ref contenues dans les enregistrements
 const tabRegs = shallowRef<QTabRegistration[]>([])
 const tick = ref(0)
+const rootEl = ref<HTMLElement | null>(null)
 
 // Recalcule la position de l'indicateur après chaque changement de DOM
 const measure = async () => {
@@ -114,14 +136,25 @@ const measure = async () => {
   tick.value++
 }
 
+// collapse-inactive : le label s'étend/retombe via une transition max-width
+// (0.3s) — à la fin, la largeur du tab actif change encore → re-mesurer,
+// sinon l'indicateur reste calé sur la largeur repliée (mal positionné).
+// transitionend bulle depuis le label jusqu'à la racine : un seul écouteur.
+const onCollapseEnd = (e: Event) => {
+  if ((e as TransitionEvent).propertyName !== "max-width") return
+  measure()
+}
+
 watch([() => props.modelValue, tabRegs], measure)
 
 onMounted(() => {
   measure()
   if (typeof window !== "undefined") window.addEventListener("resize", measure)
+  rootEl.value?.addEventListener("transitionend", onCollapseEnd)
 })
 onBeforeUnmount(() => {
   if (typeof window !== "undefined") window.removeEventListener("resize", measure)
+  rootEl.value?.removeEventListener("transitionend", onCollapseEnd)
 })
 
 const context: QTabContext = {
@@ -136,6 +169,7 @@ const context: QTabContext = {
   inlineLabel: computed(() => props.inlineLabel),
   noCaps: computed(() => props.noCaps),
   activeClass: computed(() => (props.activeClass ? props.activeClass : undefined)),
+  collapseInactive: computed(() => props.collapseInactive),
 }
 
 provide(qTabsKey, context)
@@ -170,6 +204,8 @@ const containerStyle = computed<Record<string, string>>(() => {
   // Token (primary…) → var(--primary) ; sinon valeur directe (hex, rgb…)
   if (props.activeColor) style["--q-tabs-active-color"] = colorValue(props.activeColor)
   if (props.activeBgColor) style["--q-tabs-active-bg"] = colorValue(props.activeBgColor)
+  if (props.inactiveColor) style["--q-tabs-inactive-color"] = colorValue(props.inactiveColor)
+  if (props.transitionDuration) style["--q-tabs-duration"] = `${props.transitionDuration}ms`
   return style
 })
 
@@ -184,12 +220,15 @@ const tabsClasses = computed(() =>
     props.shrink && "q-tabs--shrink",
     props.stretch && "q-tabs--stretch",
     props.animated && "q-tabs--animated",
+    props.animated && `q-tabs--anim-${props.transition}`,
+    props.collapseInactive && "q-tabs--collapse-inactive",
   ),
 )
 </script>
 
 <template>
   <div
+    ref="rootEl"
     class="q-tabs"
     :class="tabsClasses"
     :style="containerStyle"

package/index.ts

@@ -39,6 +39,7 @@ export { default as QCountryPicker } from "./components/QCountryPicker.vue"
 export { default as QDataGrid } from "./components/QDataGrid.vue"
 export { default as QDatePicker } from "./components/QDatePicker.vue"
 export { default as QDialog } from "./components/QDialog.vue"
+export { default as QDialogContent } from "./components/QDialogContent.vue"
 export { default as QDialogFooter } from "./components/QDialogFooter.vue"
 export { default as QDialogHeader } from "./components/QDialogHeader.vue"
 export { default as QDialogProvider } from "./components/QDialogProvider.vue"

package/lib/fixedLayout.ts

@@ -1,11 +1,15 @@
-// fixedLayout — offset automatique des barres fixed (q-header, q-back-header)
-// et du q-page qui les suit.
+// fixedLayout — offset automatique des barres fixed (q-header, q-back-header,
+// q-footer) et du q-page qui les entoure.
 //
 // Problème : les barres fixed sortent du flux (position: fixed) → le contenu de
 // q-page passe dessous. Ce module :
 //  - q-page (mode "page") reçoit un padding-top = hauteur cumulée des barres
-//    fixed qui le précèdent (le contenu ne se retrouve plus sous le header)
+//    fixed HAUT qui le précèdent ET un padding-bottom = hauteur cumulée des
+//    barres fixed BAS qui le suivent (le contenu n'est masqué ni en haut ni en
+//    bas au scroll)
 //  - chaque barre fixed suivante (mode "bar") s'empile sous la précédente (top)
+//  - chaque barre fixed basse (mode "bar-bottom") s'empile au-dessus de la
+//    suivante (bottom)
 //
 // Les barres fixed sont cherchées dans TOUT le sous-arbre de l'enveloppe q-app
 // (pas seulement parmi les frères directs) et ordonnées par position dans le
@@ -15,7 +19,12 @@
 import { onBeforeUnmount, onMounted, watch } from "vue"
 import type { Ref } from "vue"
 
-export const FIXED_BAR_SELECTOR = ".q-header--fixed, .q-back-header--fixed"
+/** Barres fixed en haut de l'écran */
+export const FIXED_TOP_SELECTOR = ".q-header--fixed, .q-back-header--fixed"
+/** Barres fixed en bas de l'écran */
+export const FIXED_BOTTOM_SELECTOR = ".q-footer--fixed"
+/** Toutes les barres fixed (haut + bas) */
+export const FIXED_BAR_SELECTOR = `${FIXED_TOP_SELECTOR}, ${FIXED_BOTTOM_SELECTOR}`
 
 /** Racine du layout : le .q-app le plus proche, sinon le parent direct. */
 function layoutRoot(el: HTMLElement): HTMLElement | null {
@@ -23,13 +32,13 @@ function layoutRoot(el: HTMLElement): HTMLElement | null {
 }
 
 /**
- * Hauteur cumulée des barres fixed qui précèdent `el` dans l'ordre du document,
- * sous la même enveloppe q-app. `el` lui-même (cas mode "bar") est exclu.
+ * Hauteur cumulée des barres fixed HAUT qui précèdent `el` dans l'ordre du
+ * document, sous la même enveloppe q-app. `el` lui-même (cas mode "bar") est exclu.
  */
 export function fixedBarsHeightBefore(el: HTMLElement): number {
   const root = layoutRoot(el)
   if (!root) return 0
-  const bars = Array.from(root.querySelectorAll<HTMLElement>(FIXED_BAR_SELECTOR))
+  const bars = Array.from(root.querySelectorAll<HTMLElement>(FIXED_TOP_SELECTOR))
   let total = 0
   for (const bar of bars) {
     if (bar === el) continue
@@ -41,6 +50,26 @@ export function fixedBarsHeightBefore(el: HTMLElement): number {
   return total
 }
 
+/**
+ * Hauteur cumulée des barres fixed BAS qui SUIVENT `el` dans l'ordre du
+ * document, sous la même enveloppe q-app. `el` lui-même (cas mode "bar-bottom")
+ * est exclu.
+ */
+export function fixedBarsHeightAfter(el: HTMLElement): number {
+  const root = layoutRoot(el)
+  if (!root) return 0
+  const bars = Array.from(root.querySelectorAll<HTMLElement>(FIXED_BOTTOM_SELECTOR))
+  let total = 0
+  for (const bar of bars) {
+    if (bar === el) continue
+    // DOCUMENT_POSITION_PRECEDING = la barre est APRÈS el dans le document
+    if (bar.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING) {
+      total += bar.offsetHeight
+    }
+  }
+  return total
+}
+
 /** Toutes les barres fixed sous l'enveloppe q-app (pour l'observation). */
 function fixedBarsInRoot(el: HTMLElement): HTMLElement[] {
   const root = layoutRoot(el)
@@ -49,15 +78,19 @@ function fixedBarsInRoot(el: HTMLElement): HTMLElement[] {
 }
 
 /**
- * Applique l'offset lié aux barres fixed qui précèdent `el` :
- * - mode "page" : padding-top = hauteur cumulée (q-page) + variable --q-page-offset
- * - mode "bar"  : top = hauteur cumulée (empilement des barres fixed)
+ * Applique l'offset lié aux barres fixed qui entourent `el` :
+ * - mode "page"       : padding-top = barres HAUT précédentes,
+ *                       padding-bottom = barres BAS suivantes
+ *                       (+ variables --q-page-offset / --q-page-offset-bottom)
+ * - mode "bar"        : top = hauteur cumulée (empilement des barres fixed HAUT)
+ * - mode "bar-bottom" : bottom = hauteur cumulée (empilement des footers fixed
+ *                       depuis le bas de l'écran)
  *
  * `enabled` permet de n'activer que dans certaines conditions (ex. props.fixed).
  */
 export function useFixedBarOffset(
   el: Ref<HTMLElement | null>,
-  mode: "page" | "bar",
+  mode: "page" | "bar" | "bar-bottom",
   enabled: () => boolean = () => true,
 ) {
   let ro: ResizeObserver | null = null
@@ -75,14 +108,22 @@ export function useFixedBarOffset(
   const apply = () => {
     const node = el.value
     if (!node || !enabled()) return
-    const h = fixedBarsHeightBefore(node)
     if (mode === "page") {
-      node.style.setProperty("--q-page-offset", h ? `${h}px` : "0px")
-      node.style.paddingTop = h ? `${h}px` : ""
+      const top = fixedBarsHeightBefore(node)
+      const bottom = fixedBarsHeightAfter(node)
+      node.style.setProperty("--q-page-offset", top ? `${top}px` : "0px")
+      node.style.setProperty("--q-page-offset-bottom", bottom ? `${bottom}px` : "0px")
+      node.style.paddingTop = top ? `${top}px` : ""
+      node.style.paddingBottom = bottom ? `${bottom}px` : ""
     }
-    else {
+    else if (mode === "bar") {
+      const h = fixedBarsHeightBefore(node)
       node.style.top = h ? `${h}px` : ""
     }
+    else {
+      const h = fixedBarsHeightAfter(node)
+      node.style.bottom = h ? `${h}px` : ""
+    }
   }
 
   const clear = () => {
@@ -90,11 +131,16 @@ export function useFixedBarOffset(
     if (!node) return
     if (mode === "page") {
       node.style.removeProperty("--q-page-offset")
+      node.style.removeProperty("--q-page-offset-bottom")
       node.style.paddingTop = ""
+      node.style.paddingBottom = ""
     }
-    else {
+    else if (mode === "bar") {
       node.style.top = ""
     }
+    else {
+      node.style.bottom = ""
+    }
   }
 
   onMounted(() => {

package/lib/platform.ts

@@ -1,5 +1,6 @@
 // $q.platform — détection de plateforme (API groupée sous `is`)
 // + breakpoints réactifs (VueUse useBreakpoints, tailles Quasar).
+// API alignée sur Quasar : https://quasar.dev/options/platform-detection
 import { useBreakpoints } from "@vueuse/core"
 
 export interface QPlatformIs {
@@ -9,6 +10,8 @@ export interface QPlatformIs {
   desktop: boolean
   /** mobile ET Capacitor/Cordova (app native) */
   nativeMobile: boolean
+  /** nom du wrapper natif : 'cordova' | 'capacitor' | undefined */
+  nativeMobileWrapper?: "cordova" | "capacitor"
   ios: boolean
   android: boolean
   iphone: boolean
@@ -22,12 +25,40 @@ export interface QPlatformIs {
   firefox: boolean
   opera: boolean
   safari: boolean
+  vivaldi: boolean
   ie: boolean
+  /** moteur WebKit (Safari, Chrome, Edge…) */
+  webkit: boolean
+  /** extension navigateur (BEX — Chrome/Firefox) */
+  bex: boolean
+  /** Chrome OS (Chromebook) */
+  cros: boolean
+  blackberry: boolean
+  winphone: boolean
+  /** Amazon Silk (Kindle) */
+  silk: boolean
   cordova: boolean
   capacitor: boolean
   electron: boolean
+  /** écran tactile */
   touch: boolean
+  /** pointeur précis (souris) disponible */
   mouse: boolean
+  /** nom du navigateur : 'chrome' | 'firefox' | 'safari' | … | 'generic' */
+  name: string
+  /** version complète du navigateur ('70.0.3538.110') */
+  version: string
+  /** version majeure du navigateur (70, ou -1 si inconnue) */
+  versionNumber: number
+  /** nom de l'OS : 'mac' | 'win' | 'linux' | 'ios' | 'android' | 'cros' | … */
+  platform: string
+}
+
+export interface QPlatformHas {
+  /** écran tactile capable */
+  touch: boolean
+  /** localStorage / sessionStorage disponibles */
+  webStorage: boolean
 }
 
 export interface QPlatform {
@@ -38,25 +69,111 @@ export interface QPlatform {
   isClient: boolean
   /** booléens de détection groupés : $q.platform.is.mobile, is.ios, … */
   is: QPlatformIs
+  /** capacités : has.touch, has.webStorage */
+  has: QPlatformHas
   within: { iframe: boolean }
 }
 
+function emptyIs(): QPlatformIs {
+  return {
+    mobile: false,
+    tablet: false,
+    desktop: false,
+    nativeMobile: false,
+    nativeMobileWrapper: undefined,
+    ios: false,
+    android: false,
+    iphone: false,
+    ipad: false,
+    ipod: false,
+    mac: false,
+    win: false,
+    linux: false,
+    chrome: false,
+    edge: false,
+    firefox: false,
+    opera: false,
+    safari: false,
+    vivaldi: false,
+    ie: false,
+    webkit: false,
+    bex: false,
+    cros: false,
+    blackberry: false,
+    winphone: false,
+    silk: false,
+    cordova: false,
+    capacitor: false,
+    electron: false,
+    touch: false,
+    mouse: false,
+    name: "",
+    version: "",
+    versionNumber: -1,
+    platform: "",
+  }
+}
+
+/** Nom + version du navigateur depuis l'UA (ordre = spécificité) */
+function detectBrowser(ua: string) {
+  const m = (re: RegExp) => ua.match(re)?.[1] ?? ""
+  let name = "generic"
+  let version = ""
+
+  if (/vivaldi\/([\d.]+)/i.test(ua)) {
+    name = "vivaldi"
+    version = m(/vivaldi\/([\d.]+)/i)
+  }
+  else if (/edg\/([\d.]+)/i.test(ua)) {
+    name = "edge"
+    version = m(/edg\/([\d.]+)/i)
+  }
+  else if (/edge\/([\d.]+)/i.test(ua)) {
+    name = "edge"
+    version = m(/edge\/([\d.]+)/i)
+  }
+  else if (/opr\/([\d.]+)/i.test(ua)) {
+    name = "opera"
+    version = m(/opr\/([\d.]+)/i)
+  }
+  else if (/opera\/([\d.]+)/i.test(ua)) {
+    name = "opera"
+    version = m(/opera\/([\d.]+)/i)
+  }
+  else if (/(?:chrome|crios)\/([\d.]+)/i.test(ua)) {
+    name = "chrome"
+    version = m(/(?:chrome|crios)\/([\d.]+)/i)
+  }
+  else if (/(?:firefox|fxios)\/([\d.]+)/i.test(ua)) {
+    name = "firefox"
+    version = m(/(?:firefox|fxios)\/([\d.]+)/i)
+  }
+  else if (/msie ([\d.]+)/i.test(ua)) {
+    name = "ie"
+    version = m(/msie ([\d.]+)/i)
+  }
+  else if (/trident\/.*rv:([\d.]+)/i.test(ua)) {
+    name = "ie"
+    version = m(/trident\/.*rv:([\d.]+)/i)
+  }
+  else if (/version\/([\d.]+)/i.test(ua)) {
+    name = "safari"
+    version = m(/version\/([\d.]+)/i)
+  }
+
+  const versionNumber = version ? parseInt(version.split(".")[0]!, 10) || -1 : -1
+  return { name, version, versionNumber }
+}
+
 function detect(): QPlatform {
   if (typeof window === "undefined" || typeof navigator === "undefined") {
-    const empty = Object.fromEntries(
-      [
-        "mobile", "tablet", "desktop", "nativeMobile", "ios", "android", "iphone",
-        "ipad", "ipod", "mac", "win", "linux", "chrome", "edge", "firefox",
-        "opera", "safari", "ie", "cordova", "capacitor", "electron", "touch", "mouse",
-      ].map((k) => [k, false]),
-    ) as unknown as QPlatformIs
-
     return {
       userAgent: "",
       platform: "",
       isServer: true,
       isClient: false,
-      is: empty,
+      is: emptyIs(),
+      has: { touch: false, webStorage: false },
       within: { iframe: false },
     }
   }
@@ -71,17 +188,54 @@ function detect(): QPlatform {
   // iPad modernes : MacIntel + écran tactile multi-points
   const ipad = /ipad/i.test(ua) || (/macintosh|macintel/i.test(platform) && (nav.maxTouchPoints ?? 0) > 1)
   const android = /android/i.test(ua)
+  const blackberry = /blackberry/i.test(ua)
+  const winphone = /windows phone/i.test(ua)
+  // Chromebooks : navigator.platform vaut "CrOS x86_64" (ou "Linux x86_64" ancien)
+  const cros = /cros/i.test(platform)
+  const silk = /silk/i.test(ua)
 
   const touch = "ontouchstart" in window || (nav.maxTouchPoints ?? 0) > 0
   const mobileUA = /mobile|iphone|ipod|android|windows phone|blackberry/i.test(ua)
   const tablet = ipad || (android && !mobileUA)
   const mobile = mobileUA || (tablet ? false : touch && /android|ipad|iphone/i.test(ua))
 
+  const cordova = "cordova" in window
+  const capacitor = !!(window as any).Capacitor?.isNativePlatform?.()
+  const nativeMobileWrapper: "cordova" | "capacitor" | undefined = capacitor
+    ? "capacitor"
+    : cordova
+      ? "cordova"
+      : undefined
+
+  // nom de l'OS (miroir de l'API Quasar : is.platform)
+  let osName = "generic"
+  if (android) osName = "android"
+  else if (ios) osName = "ios"
+  else if (blackberry) osName = "blackberry"
+  else if (winphone) osName = "winphone"
+  else if (cros) osName = "cros"
+  else if (silk) osName = "silk"
+  else if (/mac|iphone|ipad|ipod/i.test(ua)) osName = "mac"
+  else if (/win/i.test(ua)) osName = "win"
+  else if (/linux/i.test(platform)) osName = "linux"
+
+  let webStorage = false
+  try {
+    webStorage = typeof window.localStorage !== "undefined"
+  }
+  catch {
+    webStorage = false
+  }
+
+  const browser = detectBrowser(ua)
+  const notChromium = !/(edg|opr|vivaldi)/i.test(ua)
+
   const is: QPlatformIs = {
     mobile,
     tablet,
     desktop: !mobileUA && !tablet,
-    nativeMobile: false, // affiné après (Capacitor/Cordova)
+    nativeMobile: mobile && (capacitor || cordova),
+    nativeMobileWrapper,
     ios,
     android,
     iphone,
@@ -90,28 +244,40 @@ function detect(): QPlatform {
     mac: /mac|iphone|ipad|ipod/i.test(ua),
     win: /win/i.test(ua),
     linux: /linux/i.test(platform),
-    chrome: /chrome|crios/i.test(ua) && !/edg/i.test(ua),
-    edge: /edg/i.test(ua),
+    chrome: /chrome|crios/i.test(ua) && notChromium,
+    edge: /edg|edge/i.test(ua),
     firefox: /firefox|fxios/i.test(ua),
     opera: /opr|opera/i.test(ua),
-    safari: /safari/i.test(ua) && !/chrome|crios|edg|opr/i.test(ua),
+    safari: /safari/i.test(ua) && notChromium && !/chrome|crios/i.test(ua),
+    vivaldi: /vivaldi/i.test(ua),
     ie: /msie|trident/i.test(ua),
-    cordova: typeof window !== "undefined" && "cordova" in window,
-    capacitor: typeof window !== "undefined" && !!(window as any).Capacitor?.isNativePlatform?.(),
+    webkit: /applewebkit/i.test(ua),
+    bex:
+      typeof window !== "undefined" &&
+      !!((window as any).chrome?.runtime?.id || (globalThis as any).browser?.runtime?.id),
+    cros,
+    blackberry,
+    winphone,
+    silk,
+    cordova,
+    capacitor,
     electron: /electron/i.test(ua),
     touch,
-    mouse: typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches,
+    mouse:
+      typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches,
+    name: browser.name,
+    version: browser.version,
+    versionNumber: browser.versionNumber,
+    platform: osName,
   }
 
-  // nativeMobile : mobile + Capacitor/Cordova
-  is.nativeMobile = is.mobile && (is.capacitor || is.cordova)
-
   return {
     userAgent: ua,
     platform,
     isServer: false,
     isClient: true,
     is,
+    has: { touch, webStorage },
     within: { iframe: window.self !== window.top },
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/styles/main.css

@@ -66,9 +66,14 @@ body {
 /* Safe-area intégrées à la règle de base .q-footer (plus bas) */
 
 /* Contenu de page : pas de padding par défaut (barres dans le flux).
-   Compensation UNIQUEMENT si une barre est fixée (:has) : 50px + safe-area */
+   Compensation UNIQUEMENT si une barre est fixée (:has) : 50px + safe-area.
+   Safe-area bas : le contenu scroillé jusqu'au bout ne passe pas sous la barre
+   d'accueil iOS. */
 .q-page {
   flex: 1 1 auto; /* prend l'espace restant */
+  padding-bottom: 0;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
 }
 
 .q-app:has(.q-header--fixed) .q-page {
@@ -708,11 +713,30 @@ html.dark body {
   height: 2px;
   background-color: var(--q-tabs-active-color);
   transition:
-    transform 0.25s ease,
-    width 0.25s ease;
+    transform var(--q-tabs-duration, 0.25s) ease,
+    width var(--q-tabs-duration, 0.25s) ease;
   will-change: transform, width;
 }
 
+/* — transitions animées (prop animated + transition) —
+   L'indicateur est la star du changement de tab : chaque preset lui donne une
+   courbe différente (spring = léger overshoot, smooth = expo-out velouté,
+   elastic = rebond marqué). */
+.q-tabs--animated .q-tabs__indicator {
+  transition-duration: var(--q-tabs-duration, 0.45s);
+}
+.q-tabs--anim-spring .q-tabs__indicator {
+  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* back-out : dépasse puis se pose */
+}
+.q-tabs--anim-smooth .q-tabs__indicator {
+  transition-duration: var(--q-tabs-duration, 0.5s);
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out : glisse velouté */
+}
+.q-tabs--anim-elastic .q-tabs__indicator {
+  transition-duration: var(--q-tabs-duration, 0.6s);
+  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* rebond prononcé */
+}
+
 /* ===== QTabPanels / QTabPanel ===== */
 .q-tab-panels {
   position: relative;
@@ -801,7 +825,9 @@ html.dark body {
   padding: 0 16px;
   border: none;
   background: transparent;
-  color: inherit;
+  /* Couleur des tabs inactifs : inactive-color (QTabs) sinon couleur héritée.
+     .q-tab--active (plus bas) reprend la main par ordre de source. */
+  color: var(--q-tabs-inactive-color, inherit);
   font: inherit;
   font-size: 14px;
   font-weight: 500;
@@ -822,9 +848,15 @@ html.dark body {
   transform: scale(0.94);
 }
 
-/* pop du tab actif (overshoot, prop animated) */
-.q-tabs--animated .q-tab--active {
-  animation: q-tab-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+/* pop du tab actif (overshoot) — spring (défaut) et elastic */
+.q-tabs--anim-spring .q-tab--active,
+.q-tabs--anim-elastic .q-tab--active {
+  animation: q-tab-pop var(--q-tabs-duration, 0.3s) cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* smooth : le contenu du tab actif monte et apparaît (label + icône) */
+.q-tabs--anim-smooth .q-tab--active .q-tab__content {
+  animation: q-tab-rise var(--q-tabs-duration, 0.32s) cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 .q-tab--active {
@@ -837,8 +869,12 @@ html.dark body {
   outline-offset: -2px;
 }
 
-.q-tab:hover {
-  background-color: rgb(0 0 0 / 0.04);
+/* Mobile : le :hover reste collé après le tap (pas de souris) → réservé aux
+   devices avec hover réel (souris / trackpad) */
+@media (hover: hover) and (pointer: fine) {
+  .q-tab:hover {
+    background-color: rgb(0 0 0 / 0.04);
+  }
 }
 
 .q-tab:disabled,
@@ -928,6 +964,63 @@ html.dark body {
   }
 }
 
+@keyframes q-tab-rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* — collapse-inactive : les tabs inactifs ne montrent que l'icône ; le tab
+   actif s'étend (icône + label) avec une largeur animée (pattern mobile
+   bottom-nav). max-width 0 → 999px : la largeur utilisée = min(naturelle, max)
+   → le label se déplie jusqu'à sa largeur réelle, le tab suit.
+   PAS d'overflow: hidden : le texte n'est pas tronqué pendant l'ouverture —
+   il apparaît entier en FONDU (opacity), plus joli que le glissement. */
+.q-tabs--collapse-inactive .q-tab__content {
+  gap: 0;
+}
+.q-tabs--collapse-inactive .q-tab__label {
+  max-width: 0;
+  opacity: 0;
+  white-space: nowrap; /* pas de retour à la ligne pendant l'ouverture */
+  transition:
+    max-width var(--q-tabs-duration, 0.3s) cubic-bezier(0.16, 1, 0.3, 1),
+    opacity var(--q-tabs-duration, 0.25s) ease;
+}
+.q-tabs--collapse-inactive .q-tab--active .q-tab__content {
+  gap: 6px;
+}
+.q-tabs--collapse-inactive .q-tab--active .q-tab__label {
+  max-width: 999px;
+  opacity: 1;
+}
+
+/* Crossfade : pendant que le label du tab inactif s'estompe, celui du tab
+   actif apparaît en fondu — simultanément. Les animations d'entrée du tab
+   (pop/rise) sont neutralisées en mode collapse pour ne pas geler ou masquer
+   le fade du label entrant ; l'indicateur garde son spring (transition width). */
+.q-tabs--collapse-inactive.q-tabs--anim-spring .q-tab--active,
+.q-tabs--collapse-inactive.q-tabs--anim-elastic .q-tab--active,
+.q-tabs--collapse-inactive.q-tabs--anim-smooth .q-tab--active .q-tab__content {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .q-tabs--animated .q-tabs__indicator,
+  .q-tabs--anim-spring .q-tab--active,
+  .q-tabs--anim-elastic .q-tab--active,
+  .q-tabs--anim-smooth .q-tab--active .q-tab__content,
+  .q-tabs--collapse-inactive .q-tab__label {
+    transition-duration: 0s;
+    animation: none;
+  }
+}
+
 .q-tab__content {
   display: flex;
   flex-direction: inherit;
@@ -4492,11 +4585,8 @@ html.dark body {
 }
 
 .q-bottom-sheet__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px 16px 8px;
+  padding: 0; /* le padding est porté par le <q-toolbar> embarqué */
+  border-bottom: 1px solid rgb(0 0 0 / 0.08);
 }
 
 .q-bottom-sheet__header-text {
@@ -4546,11 +4636,17 @@ html.dark body {
 }
 
 .q-bottom-sheet__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 8px 16px 16px;
+  padding: 0; /* le padding est porté par le <q-toolbar> embarqué */
+  border-top: 1px solid rgb(0 0 0 / 0.08);
+}
+
+.q-bottom-sheet__footer .q-toolbar {
+  justify-content: flex-end; /* actions alignées à droite (défaut) */
+}
+
+.q-bottom-sheet__panel--dark .q-bottom-sheet__header,
+.q-bottom-sheet__panel--dark .q-bottom-sheet__footer {
+  border-color: rgb(255 255 255 / 0.12);
 }
 
 /* — transitions (slide vertical type vaul) — */
@@ -5815,14 +5911,28 @@ html.dark body {
 
 /* safe-area : l'encoche en haut est gérée par le header, la barre d'accueil en bas par le footer */
 .q-dialog__content--maximized .q-dialog__header,
-.q-dialog__content--top .q-dialog__header {
+.q-dialog__content--top .q-dialog__header,
+.q-dialog__content--left .q-dialog__header,
+.q-dialog__content--right .q-dialog__header {
   padding-top: 0;
   padding-top: constant(safe-area-inset-top);
   padding-top: env(safe-area-inset-top);
 }
 
+/* fullscreen en paysage : l'encoche latérale passe dans le header (comme QHeader) */
+.q-dialog__content--maximized .q-dialog__header {
+  padding-left: 0;
+  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
+  padding-right: 0;
+  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
+}
+
 .q-dialog__content--maximized .q-dialog__footer,
-.q-dialog__content--bottom .q-dialog__footer {
+.q-dialog__content--bottom .q-dialog__footer,
+.q-dialog__content--left .q-dialog__footer,
+.q-dialog__content--right .q-dialog__footer {
   padding-bottom: 0;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
@@ -5844,11 +5954,7 @@ html.dark body {
   position: sticky;
   top: 0;
   z-index: 1;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 16px;
+  padding: 0; /* le padding est porté par le <q-toolbar> embarqué */
   border-bottom: 1px solid rgb(0 0 0 / 0.08);
   background-color: inherit; /* reste opaque pendant le scroll du body */
 }
@@ -5899,15 +6005,26 @@ html.dark body {
   position: sticky;
   bottom: 0;
   z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 16px 16px;
+  padding: 0; /* le padding est porté par le <q-toolbar> embarqué */
   border-top: 1px solid rgb(0 0 0 / 0.08);
   background-color: inherit;
 }
 
+.q-dialog__footer .q-toolbar {
+  justify-content: flex-end; /* actions alignées à droite (défaut) */
+}
+
+.q-dialog__body {
+  min-height: 0;
+  padding: 4px 16px 16px;
+}
+
+.q-dialog__body--scrollable {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
 .q-dialog__trigger {
   display: inline-flex;
   align-items: center;
@@ -6321,11 +6438,80 @@ html.dark body {
   z-index: 0;
   pointer-events: none;
 }
-.q-container--bg > :not(.q-container__bg) {
+.q-container--bg > :not(.q-container__bg, .q-container__img) {
   position: relative;
   z-index: 1;
 }
 
+/* — image de fond (prop background-image) : couche cover derrière le contenu — */
+.q-container__img {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--q-container-img-fit, cover);
+  pointer-events: none;
+  user-select: none;
+}
+
+/* taille CSS libre ("50%", "400px"…) : boîte centrée (translate séparé de
+   transform → compose avec le Ken Burns), image entière visible */
+.q-container__img--sized {
+  width: var(--q-container-img-size);
+  height: var(--q-container-img-size);
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  object-fit: contain;
+}
+
+/* glassmorphisée : floutée + saturée + léger zoom pour masquer les bords du blur */
+.q-container__img--glass {
+  filter: blur(14px) saturate(1.4);
+  transform: scale(1.15);
+}
+
+/* — Ken Burns indéterminé (prop background-animated) : zoom + panoramique
+   lents qui bouclent — direction et durée configurables (défaut alternate 24s) */
+.q-container__img--animated {
+  animation:
+    q-container-kenburns var(--q-container-kenburns-duration, 24s) ease-in-out
+    var(--q-container-kenburns-direction, alternate) infinite;
+  will-change: transform;
+}
+@keyframes q-container-kenburns {
+  0% {
+    transform: scale(1.06) translate(0%, 0%);
+  }
+  30% {
+    transform: scale(1.18) translate(-2%, -1.5%);
+  }
+  60% {
+    transform: scale(1.14) translate(2%, 1.5%);
+  }
+  100% {
+    transform: scale(1.22) translate(-1%, 2%);
+  }
+}
+
+/* — glassmorphism du conteneur (prop glass) : fond translucide + flou de ce
+   qui est derrière + bordure claire (variables personnalisables) — */
+.q-container--glass {
+  --q-container-glass-bg: rgb(255 255 255 / 0.14);
+  --q-container-glass-border: rgb(255 255 255 / 0.3);
+  --q-container-glass-blur: 14px;
+  background-color: var(--q-container-glass-bg);
+  border: 1px solid var(--q-container-glass-border);
+  -webkit-backdrop-filter: blur(var(--q-container-glass-blur)) saturate(1.4);
+  backdrop-filter: blur(var(--q-container-glass-blur)) saturate(1.4);
+  box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
+}
+.dark .q-container--glass {
+  --q-container-glass-bg: rgb(255 255 255 / 0.06);
+  --q-container-glass-border: rgb(255 255 255 / 0.14);
+}
+
 /* grid : grille de carrés qui s'estompe vers les bords */
 .q-container__bg--grid {
   background-image:
@@ -6537,6 +6723,9 @@ html.dark body {
   .q-container__wave {
     animation: none;
   }
+  .q-container__img--animated {
+    animation: none;
+  }
 }
 
 /* ===== QMarquee — bandeau défilant infini ===== */