* {
            box-sizing: border-box;
            margin: 0;
            /* Hauteur totale utilisée verticalement = padding haut du body
               élargi pour laisser passer la status bar fixed (50px)
               + hauteur grille (5×cell + 4×gap20) + gap grid/container (20px)
               + hauteur container (cell + 2×10px de padding)
               + padding bas du body (20px)
               = 6×cell + 190px. On résout : 6×cell + 190px <= 100vh
               → cell <= (100vh - 190px) / 6 */
            --cell-max-by-height: calc((100vh - 190px) / 6);
            /* largeur dispo horizontalement (bornée par 90vw ET par
               l'espace réel une fois le padding du body retiré),
               répartie sur 9 colonnes + 8 gaps de 20px */
            --cell-max-by-width: calc((min(90vw, calc(100vw - 40px)) - 160px) / 9);
            /* la taille de cellule retenue est la plus petite des deux
               contraintes : ainsi tout tient toujours, quel que soit
               l'écran ou le padding choisi sur .container */
            --cell-size: min(var(--cell-max-by-height), var(--cell-max-by-width));
            --grid-width: calc(9 * var(--cell-size) + 8 * 20px);
        }

        body {
            user-select: none;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url("./assets/background.png");
            background-size: cover;
            flex-direction: column;
            /* padding haut plus grand pour laisser la place à la status
               bar, qui est en position: fixed donc hors du flux normal */
            padding: 50px 20px 20px 20px;
            gap: 20px;
            font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
        }

        .status-bar {
            /* collée aux coins de la page entière, indépendante de la
               largeur de la grille. padding-top réduit pour rapprocher la
               barre du haut de l'écran */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 10px 20px 20px 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            color: #fff;
            pointer-events: none;
            z-index: 5;
            /* léger dégradé pour détacher la barre du fond */
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
        }

        .status-left {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        .status-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-right svg {
            display: block;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            /* pas de grid-template-rows ni de height fixe : les lignes se
               dimensionnent automatiquement d'après la taille des cellules
               (largeur de colonne + aspect-ratio), ce qui évite tout
               décalage entre la hauteur imposée et la hauteur "voulue" */
            width: var(--grid-width);
            gap: 20px;
        }

        .clock-cell {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: calc(var(--cell-size) * 0.06);
            /* fond transparent + blur, coordonné avec .container */
            backdrop-filter: blur(14px);
            overflow: hidden;
        }

        .clock-cell::before {
            content: "";
            position: absolute;
            top: -30%;
            left: -20%;
            width: 140%;
            height: 140%;
            background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.14), transparent 60%);
            pointer-events: none;
            animation: clock-glow 5s ease-in-out infinite;
        }

        @keyframes clock-glow {

            0%,
            100% {
                opacity: 0.55;
            }

            50% {
                opacity: 1;
            }
        }

        .clock-face {
            position: absolute;
            width: 78%;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background: repeating-conic-gradient(rgba(255, 255, 255, 0.16) 0deg 1.5deg, transparent 1.5deg 30deg);
            -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 100%);
            mask: radial-gradient(circle, transparent 62%, #000 63%, #000 100%);
            pointer-events: none;
        }

        .clock-time {
            position: relative;
            font-size: calc(var(--cell-size) * 0.5);
            font-weight: 700;
            letter-spacing: -1px;
            line-height: 1;
            background: linear-gradient(160deg, #ffffff 0%, #cfd3d8 60%, #9aa0a8 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
        }

        .clock-divider {
            position: relative;
            width: 32%;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
        }

        .clock-date {
            position: relative;
            font-size: calc(var(--cell-size) * 0.14);
            font-weight: 500;
            letter-spacing: 0.6px;
            color: rgba(255, 255, 255, 0.78);
            text-align: center;
            text-transform: capitalize;
        }

        .cell {
            position: relative;
            background-color: rgba(20, 20, 22, 0.35);
            backdrop-filter: blur(14px);
            aspect-ratio: 1 / 1;
            border-radius: calc(var(--cell-size) * 0.35);
            background-size: cover;
            background-position: center;
            overflow: hidden;
            /* même vocabulaire visuel que les .app-icon : liseré clair +
               lumière interne en haut + ombre portée douce */
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14),
                inset 0 1px 1px rgba(255, 255, 255, 0.22),
                0 6px 16px rgba(0, 0, 0, 0.3);
            transition: transform 0.25s cubic-bezier(0.34, 1.5, 0.5, 1),
                box-shadow 0.25s ease;
        }

        /* ===== Icônes de la grille : carré réduit + nom en dessous ===== */

        /* la cellule devient un simple conteneur transparent : tout le
           style "verre" est déplacé sur le carré intérieur, plus petit */
        .cell.app-item {
            background-color: transparent;
            background-image: none;
            /* le blur hérité de .cell s'appliquerait à toute la boîte
               (case + texte) même avec un fond transparent : on le coupe
               ici, seul .app-item-icon le conserve */
            backdrop-filter: none;
            box-shadow: none;
            overflow: visible;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: calc(var(--cell-size) * 0.07);
            cursor: pointer;
        }

        .app-item-icon {
            position: relative;
            width: 74%;
            aspect-ratio: 1 / 1;
            flex: 0 0 auto;
            border-radius: calc(var(--cell-size) * 0.26);
            background-size: cover;
            background-position: center;
            background-color: rgba(20, 20, 22, 0.35);
            backdrop-filter: blur(14px);
            overflow: hidden;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14),
                inset 0 1px 1px rgba(255, 255, 255, 0.22),
                0 6px 16px rgba(0, 0, 0, 0.3);
            transition: transform 0.25s cubic-bezier(0.34, 1.5, 0.5, 1),
                box-shadow 0.25s ease;
        }

        /* reflet de verre sur la moitié haute du carré */
        .app-item-icon::after {
            content: "";
            position: absolute;
            inset: 0 0 55% 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
            pointer-events: none;
        }

        .app-item:hover .app-item-icon {
            transform: translateY(-4px) scale(1.07);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
                inset 0 1px 1px rgba(255, 255, 255, 0.35),
                0 12px 26px rgba(0, 0, 0, 0.45);
        }

        .app-item:active .app-item-icon {
            transform: translateY(0) scale(0.94);
            transition-duration: 0.09s;
        }

        .app-item-name {
            font-size: calc(var(--cell-size) * 0.155);
            font-weight: 500;
            letter-spacing: 0.01em;
            color: #fff;
            text-align: center;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
            transition: opacity 0.25s ease;
            opacity: 0.9;
        }

        .app-item:hover .app-item-name {
            opacity: 1;
        }

        /* reflet de verre sur la moitié haute, comme sur les icônes d'apps.
           La case 4x2, les tuiles d'app et le dock en sont exclus : la 4x2
           et les apps ont déjà leur propre reflet interne, et le dock
           réserve son ::after à l'étiquette nom */
        .cell:not(.empty):not(.size-4x2):not(.app-item):not(.dock-icon)::after {
            content: "";
            position: absolute;
            inset: 0 0 55% 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
            pointer-events: none;
            z-index: 2;
        }

        /* survol des icônes du dock (celles de la grille sont gérées
           par les règles .app-item plus haut) */
        .container .cell {
            cursor: pointer;
            position: relative;
            /* le dock laisse déborder l'étiquette + le rebond (overflow:visible).
               Le reflet ::before est rogné via son propre border-radius (top uniquement),
               pas besoin de clipper tout le .cell */
            overflow: visible;
            /* le fond verre est hérité de .cell ; ici on aligne juste le
               radius avec la taille réduite du dock */
            border-radius: calc(var(--cell-size) * 0.287);
            transform: translateY(0) scale(1);
            /* au repos : transition lente pour le retour doux (voir :not(:hover)) */
            transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease,
                filter 0.35s ease;
            will-change: transform, box-shadow;
        }

        /* le SVG remplit une bonne partie de la pastille verre */
        .container .cell.dock-icon svg,
        .container .cell .dock-inner svg {
            width: 72%;
            height: 72%;
            display: block;
            position: relative;
            z-index: 1;
        }
        .dock-inner {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: inherit;
            pointer-events: none;
        }

        /* rebond façon macOS : monte/descend en boucle tant que survolé */
        @keyframes dock-bounce {
            0%, 100% { transform: translateY(-4px) scale(1.05); }
            50% { transform: translateY(-14px) scale(1.12); }
        }

        .container .cell:hover {
            /* animation gérée en JS via transitions pour éviter le TP - on ne met que l'ombre ici */
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
                inset 0 1px 1px rgba(255, 255, 255, 0.35),
                0 18px 32px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(140, 180, 255, 0.25);
        }

        /* retour doux quand on quitte le hover : écrase la transition de base avec une durée plus longue et easing amorti */
        .container .cell:not(:hover) {
            transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.55s ease,
                        filter 0.55s ease;
        }

        /* étiquette nom au-dessus de l'icône : cachée par défaut,
           apparaît en fondu + montée au survol. Le nom vient de
           l'attribut data-name de chaque .dock-icon */
        .container .cell.dock-icon::after {
            content: attr(data-name);
            position: absolute;
            bottom: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%) translateY(6px) scale(0.9);
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.02em;
            white-space: nowrap;
            color: #fff;
            background: rgba(20, 20, 24, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            backdrop-filter: blur(12px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease,
                transform 0.28s cubic-bezier(0.34, 1.4, 0.5, 1);
            z-index: 10;
        }

        .container .cell.dock-icon:hover::after {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
        }

        /* reflet de verre du dock, passé sur ::before puisque ::after
           affiche désormais l'étiquette nom.
           - border-radius uniquement en haut pour éviter la capsule et
             pour que le reflet épouse exactement les coins arrondis du parent
             même avec overflow:visible (pas besoin de clipper toute la cellule) */
        .container .cell.dock-icon::before {
            content: "";
            position: absolute;
            inset: 0 0 55% 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
            border-radius: calc(var(--cell-size) * 0.287) calc(var(--cell-size) * 0.287) 0 0;
            pointer-events: none;
            z-index: 2;
        }

        .container .cell:active {
            animation: none;
            transform: translateY(0) scale(0.95);
            transition-duration: 0.09s;
        }

        .empty {
            box-shadow: none;
        }

        .size-2x2 {
            aspect-ratio: auto;
            height: calc(2 * var(--cell-size) + 20px);
            grid-column: span 2;
            grid-row: span 2;
        }

        .empty {
            background: transparent;
            backdrop-filter: none;
            border: none;
            box-shadow: none;
        }

        .size-4x2 {
            aspect-ratio: auto;
            height: calc(2 * var(--cell-size) + 20px);
            grid-column: span 4;
            grid-row: span 2;
        }

        .size-4x1 {
            aspect-ratio: auto;
            height: var(--cell-size);
            grid-column: span 4;
            grid-row: span 1;
        }

        .test {
            width: 100%;
            height: 10vh;
            background-color: rgba(255, 0, 0, 0.49);
            flex-shrink: 0;
        }

        .container {
            width: 40vw;
            /* hauteur = cellule réduite + le padding haut/bas de 10px,
               pour envelopper les cells sans qu'elles ne débordent */
            height: calc(var(--cell-size) * 0.82 + 20px);
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 10px;
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: calc(var(--cell-size) * 0.38);
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.04));
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25),
                0 10px 30px rgba(0, 0, 0, 0.35);
            justify-content: center;
            /* l'étiquette nom et le rebond dépassent vers le haut :
               on laisse déborder au lieu de rogner */
            overflow: visible;
        }

        .container .cell {
            /* version réduite des cells de la grille ; la hauteur suit
               automatiquement via aspect-ratio: 1/1 hérité de .cell */
            width: calc(var(--cell-size) * 0.82);
            flex-shrink: 0;
            border-radius: calc(var(--cell-size) * 0.287);
        }

        /* ===== Zoom de la case 4x2 au survol ===== */

        /* éclaircissement permanent (identique à l'ancien style :hover) :
           l'apparence de la case ne change plus du tout au survol, et le
           clone hérite du même filtre puisqu'il porte les mêmes classes.
           font-size = unité de base de tout le contenu interne (icônes,
           labels, gaps) : le JS l'anime pendant le zoom, donc les apps
           grandissent exactement avec la case */
        .cell.size-4x2 {
            filter: brightness(1.25);
            overflow: hidden;
            font-size: calc(var(--cell-size) * 0.22);
        }

        .grid .cell.size-4x2 {
            cursor: zoom-in;
            /* en mode normal : même verre que .cell (bordure + ombre visibles)
               Le clone .tile-clone garde sa propre ombre transparente pour
               animer l'ouverture/fermeture dans les deux sens */
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14),
                inset 0 1px 1px rgba(255, 255, 255, 0.22),
                0 6px 16px rgba(0, 0, 0, 0.3);
        }

        .app-grid {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 0.35em 0.25em;
            padding: 0.55em 0.7em;
        }

        .app {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.22em;
            min-width: 0;
            min-height: 0;
            cursor: pointer;
            transition: transform 0.22s cubic-bezier(0.34, 1.5, 0.5, 1);
        }

        .app:hover {
            transform: translateY(-0.14em) scale(1.09);
        }

        /* retour haptique visuel : la touche s'enfonce légèrement au clic */
        .app:active {
            transform: translateY(-0.02em) scale(0.95);
            transition-duration: 0.09s;
        }

        /* taille fixe en em (pas de flex-grow) : les icônes gardent des
           proportions nettes, et s'agrandissent via le font-size animé.
           --c1/--c2 : dégradé propre à chaque app, défini en inline */
        .app-icon {
            position: relative;
            flex: 0 0 auto;
            width: 2.45em;
            height: 2.45em;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.86em;
            font-size: 1.2em;
            line-height: 1;
            overflow: hidden;
            background: linear-gradient(150deg, var(--c1, rgba(255, 255, 255, 0.24)), var(--c2, rgba(255, 255, 255, 0.07)));
            background-color: rgba(20, 20, 22, 0.0);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14),
                inset 0 1px 1px rgba(255, 255, 255, 0.22),
                0 6px 16px rgba(0, 0, 0, 0.3);
            transition: box-shadow 0.22s ease;
        }

        /* reflet de verre sur la moitié haute de l'icône */
        .app-icon::after {
            content: "";
            position: absolute;
            inset: 0 0 55% 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
            pointer-events: none;
        }

        .app:hover .app-icon {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
                inset 0 1px 1px rgba(255, 255, 255, 0.35),
                0 12px 26px rgba(0, 0, 0, 0.45);
        }

        .app-label {
            flex: 0 0 auto;
            font-size: 0.46em;
            font-weight: 500;
            letter-spacing: 0.02em;
            color: rgba(255, 255, 255, 0.85);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            text-shadow: 0 0.04em 0.12em rgba(0, 0, 0, 0.55);
            transition: color 0.22s ease;
        }

        .app:hover .app-label {
            color: #fff;
        }

        /* ===== Widgets assortis (même langage visuel) ===== */

        /* base commune : unité em calée sur la taille de cellule, comme
           pour la case 4x2, afin que tout reste proportionné */
        .widget {
            font-size: calc(var(--cell-size) * 0.22);
            color: #fff;
            padding: 0.6em;
            display: flex;
        }

        /* --- Welcome (case 4x1) - intégré au système verre, sobre & premium --- */
        .welcome--integrated {
            align-items: center;
            gap: 0.75em;
            padding: 0 1.1em;
            background-color: rgba(20, 20, 22, 0.35);
            backdrop-filter: blur(14px);
            border: none;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14),
                        inset 0 1px 1px rgba(255, 255, 255, 0.14),
                        0 6px 16px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }
        .welcome--integrated:hover {
            transform: translateY(-1px);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
                        inset 0 1px 1px rgba(255, 255, 255, 0.18),
                        0 10px 24px rgba(0, 0, 0, 0.36);
            filter: brightness(1.04);
        }
        /* reflet standard comme les autres .cell (inset 0 0 55%) */
        .welcome--integrated::after {
            content: "";
            position: absolute;
            inset: 0 0 55% 0;
            background: linear-gradient(180deg, rgba(255,255,255,0.09), transparent);
            pointer-events: none;
            border-radius: inherit;
            z-index: 1;
        }
        /* image EXO en fond, dégradé gauche transparent -> droite 40% transparente (60% visible) */
        .welcome--with-bg .welcome-bg {
            position: absolute;
            inset: 0;
            background-image: url("./assets/exo-station.png");
            background-size: cover;
            background-position: center 45%;
            background-repeat: no-repeat;
            pointer-events: none;
            z-index: 0;
            /* masque : gauche 0% visible, droite 60% visible (= 40% transparente) */
            -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 22%, rgba(0,0,0,0.6) 78%, rgba(0,0,0,0.6) 100%);
            mask-image: linear-gradient(to right, transparent 0%, transparent 22%, rgba(0,0,0,0.8) 78%, rgba(0,0,0,0.6) 100%);
            opacity: 1;
            filter: saturate(0.85) contrast(1.05) brightness(1.02);
            transform: scale(1.02);
        }
        .welcome--with-bg .welcome-icon,
        .welcome--with-bg .welcome-text
        .welcome-icon {
            position: relative;
            flex: 0 0 auto;
            width: 1.85em;
            height: 1.85em;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.48em;
            background: linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
            background-color: rgba(20, 20, 22, 0.32);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.12);
            z-index: 1;
        }
        .welcome-icon-letter {
            font-size: 0.72em;
            font-weight: 800;
            letter-spacing: -0.04em;
            line-height: 1;
            color: rgba(255,255,255,0.92);
            text-shadow: 0 1px 8px rgba(0,0,0,0.22);
        }
        .welcome--integrated .welcome-text {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.16em;
            z-index: 1;
        }
        .welcome--integrated .welcome-title {
            font-size: 0.48em;
            font-weight: 680;
            letter-spacing: -0.018em;
            line-height: 1;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 1px 3px rgba(0,0,0,0.38);
        }
        .welcome--integrated .welcome-subtitle {
            font-size: 0.24em;
            font-weight: 450;
            letter-spacing: 0.01em;
            color: rgba(255, 255, 255, 0.60);
            line-height: 1.15;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        @media (max-width: 900px) {
            .welcome--integrated .welcome-subtitle { font-size: 0.22em; }
        }

        /* --- Météo (case 2x2) --- */
        .weather {
            flex-direction: column;
            justify-content: space-between;
            background: linear-gradient(155deg, rgba(60, 130, 215, 0.55), rgba(18, 32, 60, 0.5));
        }

        .weather-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.3em;
        }

        .weather-city {
            font-size: 0.46em;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            opacity: 0.9;
        }

        .weather-ico {
            font-size: 0.9em;
            line-height: 1;
            filter: drop-shadow(0 0.08em 0.15em rgba(0, 0, 0, 0.45));
        }

        .weather-temp {
            font-size: 1.5em;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.03em;
            background: linear-gradient(160deg, #fff, #cfe0f5);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .weather-desc {
            font-size: 0.42em;
            opacity: 0.85;
            margin-top: 0.3em;
        }

        .weather-bars {
            display: flex;
            align-items: flex-end;
            gap: 0.18em;
            height: 0.75em;
            margin-top: 0.4em;
        }

        .weather-bars i {
            flex: 1;
            border-radius: 0.1em;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25));
        }

        /* --- Lecteur (case 4x1) --- */
        .player {
            align-items: center;
            gap: 0.55em;
            background: linear-gradient(120deg, rgba(120, 40, 90, 0.5), rgba(25, 20, 45, 0.5));
        }

        .player-art {
            flex: 0 0 auto;
            width: 1.9em;
            height: 1.9em;
            border-radius: 0.42em;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85em;
            background: linear-gradient(150deg, #ff8fa3, #b3245e);
            box-shadow: inset 0 0 0 0.04em rgba(255, 255, 255, 0.35),
                0 0.12em 0.3em rgba(0, 0, 0, 0.45);
        }

        .player-info {
            flex: 1 1 auto;
            min-width: 0;
        }

        .player-title {
            font-size: 0.46em;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .player-artist {
            font-size: 0.38em;
            opacity: 0.75;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .player-bar {
            margin-top: 0.3em;
            height: 0.12em;
            border-radius: 0.1em;
            background: rgba(255, 255, 255, 0.2);
            overflow: hidden;
        }

        .player-bar span {
            display: block;
            width: 42%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #ff9ab0, #fff);
        }

        .player-ctrl {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 0.4em;
            font-size: 0.6em;
            opacity: 0.9;
        }

        .player-ctrl span {
            cursor: pointer;
            transition: transform 0.2s cubic-bezier(0.34, 1.5, 0.5, 1);
        }

        .player-ctrl span:hover {
            transform: scale(1.25);
        }

        /* --- Icônes dessinées en SVG inline ---
           fond neutre : la tuile garde le verre flouté standard de
           .app-item-icon, seul le tracé SVG clean est posé dessus */
        .icon-svg {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16%;
        }

        .icon-svg svg {
            width: 100%;
            height: 100%;
            display: block;
            overflow: visible;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
        }

        /* Spécifique pour les SVGs insérés dans les dossiers (4x2) */
        .app-icon.icon-svg {
            padding: 16%;
        }

        .app-icon.icon-svg svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* --- Dock : le fond verre vient de .cell, on ne rajoute rien ---
           (l'ancien dégradé linear-gradient(150deg, var(--c1), var(--c2))
           avec des variables inexistantes créait le fond parasite de la
           même taille mais avec des coins moins arrondis) */
        .dock-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(var(--cell-size) * 0.34);
            line-height: 1;
            background-image: none;
        }

        /* la case d'origine s'efface en fondu pendant que son clone est
           affiché en grand ; sa place dans la grille est conservée.
           Transition synchronisée avec le clone (0.32s) pour éviter le double
           rendu / effet spawn au chevauchement */
        .grid .cell.size-4x2 {
            transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                        filter 0.32s ease,
                        box-shadow 0.32s ease;
            will-change: opacity;
        }

        .grid .cell.size-4x2.tile-source-hidden {
            opacity: 0;
        }

        /* entrance douce au chargement pour éviter le spawn sec de la 4x2 */
        @keyframes tile-enter {
            from { opacity: 0; transform: scale(0.96) translateY(8px); filter: blur(4px); }
            to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
        }
        .grid .cell.size-4x2 {
            animation: tile-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        /* voile sombre + léger flou derrière la case agrandie.
           Le backdrop-filter n'est appliqué qu'en .visible : appliqué en
           permanence, il flouterait l'écran même avec opacity: 0 */
        .tile-backdrop {
            position: fixed;
            inset: 0;
            z-index: 990;
            background: rgba(10, 10, 14, 0.45);
            opacity: 0;
            pointer-events: none;
            backdrop-filter: blur(0px) saturate(1) brightness(1);
            -webkit-backdrop-filter: blur(0px) saturate(1) brightness(1);
            transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                        backdrop-filter 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                        -webkit-backdrop-filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, backdrop-filter;
        }

        .tile-backdrop.visible {
            opacity: 1;
            pointer-events: auto;
            backdrop-filter: blur(8px) saturate(1.15) brightness(1);
            -webkit-backdrop-filter: blur(8px) saturate(1.15) brightness(1);
        }

        /* clone de la case, positionné en fixed par le JS et animé vers
           le centre de l'écran */
        /* la transition vit sur .tile-clone lui-même : elle s'applique dans
           les deux sens (ouverture ET fermeture). Ombre transparente par
           défaut : elle se fond à l'ouverture et s'estompe à la fermeture */
        .tile-clone {
            overflow: hidden;
            opacity: 0;
            /* évite le flash spawn : le clone naît invisible puis fade in en même temps que le déplacement */
            box-shadow: 0 40px 90px rgba(0, 0, 0, 0),
                inset 0 0 0 1px rgba(255, 255, 255, 0);
            will-change: left, top, width, height, opacity, box-shadow, filter;
            /* rebond : le dépassement vient du 2e paramètre du cubic-bezier (1.42) */
            transition: left 0.44s cubic-bezier(0.34, 1.42, 0.5, 1),
                top 0.44s cubic-bezier(0.34, 1.42, 0.5, 1),
                width 0.44s cubic-bezier(0.34, 1.42, 0.5, 1),
                height 0.44s cubic-bezier(0.34, 1.42, 0.5, 1),
                border-radius 0.44s cubic-bezier(0.34, 1.42, 0.5, 1),
                font-size 0.44s cubic-bezier(0.34, 1.42, 0.5, 1),
                box-shadow 0.38s ease,
                opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.32s ease,
                transform 0.44s cubic-bezier(0.34, 1.42, 0.5, 1);
        }

        /* l'ombre + l'opacité n'existent qu'à l'état zoomé ; la classe est retirée dès le
           début de la fermeture donc tout s'estompe pendant le vol retour sans spawn */
        .tile-clone-zoomed {
            opacity: 1;
            box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        }

        /* ===== Fenêtre grossiste (élément distinct du zoom 4x2) =====
           Même contenu que le 4x2 mais grille inversée 2 colonnes x 4 lignes.
           Préfixe dock-win-* : ne partage RIEN avec .tile-clone, donc le 4x2
           garde son animation d'origine à l'identique. */
        .dock-win-backdrop {
            position: fixed;
            inset: 0;
            z-index: 990;
            background: rgba(10, 10, 14, 0.45);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .dock-win-backdrop.visible {
            opacity: 1;
            pointer-events: auto;
            backdrop-filter: blur(12px) saturate(1.25) brightness(0.9);
        }

        .dock-win {
            overflow: hidden;
            transform-origin: center center;
            box-shadow: 0 60px 120px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.12),
                0 0 80px rgba(120, 160, 255, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
            transition: opacity 0.32s ease,
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.32s ease;
        }

        .dock-win .app-grid {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 0.5em 0.4em;
            padding: 1em 1.1em;
            opacity: 0;
            transform: scale(0.92);
            filter: blur(6px);
            transition: opacity 0.28s ease,
                transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.28s ease;
        }

        .dock-win .app-grid .app {
            opacity: 0;
            transform: translateY(14px) scale(0.85);
            transition: opacity 0.3s ease,
                transform 0.38s cubic-bezier(0.34, 1.4, 0.5, 1);
        }

        .dock-win-open .app-grid {
            opacity: 1;
            transform: scale(1);
            filter: blur(0);
            transition-delay: 0.18s;
        }

        .dock-win-open .app-grid .app {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .dock-win-open .app-grid .app:nth-child(1) { transition-delay: 0.2s; }
        .dock-win-open .app-grid .app:nth-child(2) { transition-delay: 0.24s; }
        .dock-win-open .app-grid .app:nth-child(3) { transition-delay: 0.28s; }
        .dock-win-open .app-grid .app:nth-child(4) { transition-delay: 0.32s; }
        .dock-win-open .app-grid .app:nth-child(5) { transition-delay: 0.36s; }
        .dock-win-open .app-grid .app:nth-child(6) { transition-delay: 0.4s; }
        .dock-win-open .app-grid .app:nth-child(7) { transition-delay: 0.44s; }
        .dock-win-open .app-grid .app:nth-child(8) { transition-delay: 0.48s; }

        .dock-win-open .app-grid .app:hover {
            transform: translateY(-0.14em) scale(1.12);
            transition-delay: 0s;
        }

        /* bouton fermer : discret, apparaît en fondu avec le contenu */
        .dock-win .dock-win-close {
            position: absolute;
            top: 0.7em;
            right: 0.7em;
            width: 1.7em;
            height: 1.7em;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: inherit;
            line-height: 1;
            color: rgba(255, 255, 255, 0.85);
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 50%;
            backdrop-filter: blur(10px);
            cursor: pointer;
            opacity: 0;
            transform: scale(0.6) rotate(-90deg);
            transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.5, 1),
                background 0.2s ease;
            z-index: 5;
        }

        .dock-win-open .dock-win-close {
            opacity: 1;
            transform: scale(1) rotate(0deg);
            transition-delay: 0.5s;
        }

        .dock-win .dock-win-close:hover {
            background: rgba(255, 90, 90, 0.45);
        }

        /* l'icône tout à droite du dock ouvre la fenêtre 2x4 ;
           elle suit le même rebond que les autres (position finale reprise
           de la keyframe dock-bounce) */
        .container .cell.dock-icon:last-child {
            cursor: pointer;
        }

        /* état actif : l'icône reste soulevée + halo tant que la fenêtre est ouverte */
        .container .cell.dock-icon:last-child.dock-active {
            animation: none;
            transform: translateY(-7px) scale(1.08);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45),
                inset 0 1px 1px rgba(255, 255, 255, 0.35),
                0 12px 28px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(140, 180, 255, 0.35);
        }

        /* le halo lumineux apparaît aussi en fondu plutôt que d'un coup */
        .tile-clone::before {
            content: "";
            position: absolute;
            top: -30%;
            left: -20%;
            width: 140%;
            height: 140%;
            background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 60%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.44s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity;
        }

        /* même logique que l'ombre : le halo apparaît en fondu à
           l'ouverture et s'estompe pendant la fermeture */
        .tile-clone-zoomed::before {
            opacity: 1;
        }

        /* halo de la fenêtre grossiste (élément distinct) */
        .dock-win::before {
            content: "";
            position: absolute;
            top: -30%;
            left: -20%;
            width: 140%;
            height: 140%;
            background: radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.22), transparent 55%),
                radial-gradient(circle at 75% 90%, rgba(130, 170, 255, 0.12), transparent 55%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .dock-win-open::before {
            opacity: 1;
        }

        /* ===== Variante Entreprises : liste verticale icon + label (icones réduites, style d'origine conservé) ===== */
        .dock-win--entreprises {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            max-width: 92vw;
            max-height: 82vh;
            font-size: 16px;
        }
        .dock-win--entreprises .app-grid {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            max-height: calc(70vh - 32px) !important;
            display: flex !important;
            flex-direction: column !important;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 2px;
            padding: 8px 10px 10px 10px;
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        /* ===== Scrollbar Entreprises — verre assorti au site ===== */
        .dock-win--entreprises .app-grid {
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.22) rgba(255,255,255,0.04);
        }
        .dock-win--entreprises .app-grid::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }
        .dock-win--entreprises .app-grid::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 999px;
            margin: 8px 2px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
        }
        .dock-win--entreprises .app-grid::-webkit-scrollbar-thumb {
            /* verre dépoli + reflet haut comme les .cell */
            background-color: rgba(255,255,255,0.09);
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDI0IDI0Ij48bGluZWFyR3JhZGllbnQgaWQ9IlhqN09DSXJZTXdLQlA3UF81TEtza2FfaHM5RzE3VjNHbVo1X2dyMSIgeDE9IjUuNTg2IiB4Mj0iMTguNDE0IiB5MT0iNS41ODYiIHkyPSIxOC40MTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iLjYiPjwvc3RvcD48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iLjMiPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjxwYXRoIGZpbGw9InVybCgjWGo3T0NJcllNd0tCUDdQXzVMS3NrYV9oczlHMTdWM0dtWjVfZ3IxKSIgZD0iTTksMjFWM2MwLTEuMTA1LDAuODk1LTIsMi0yaDJjMS4xMDUsMCwyLDAuODk1LDIsMnYxOGMwLDEuMTA1LTAuODk1LDItMiwyaC0yIEM5Ljg5NSwyMyw5LDIyLjEwNSw5LDIxeiI+PC9wYXRoPjxsaW5lYXJHcmFkaWVudCBpZD0iWGo3T0NJcllNd0tCUDdQXzVMS3NrYl9oczlHMTdWM0dtWjVfZ3IyIiB4MT0iOSIgeDI9IjE1IiB5MT0iMTIiIHkyPSIxMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIuNiI+PC9zdG9wPjxzdG9wIG9mZnNldD0iLjQ5MyIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIj48L3N0b3A+PHN0b3Agb2Zmc2V0PSIuOTk3IiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9Ii4zIj48L3N0b3A+PC9saW5lYXJHcmFkaWVudD48cGF0aCBmaWxsPSJ1cmwoI1hqN09DSXJZTXdLQlA3UF81TEtza2JfaHM5RzE3VjNHbVo1X2dyMikiIGQ9Ik0xMywxLjVjMC44MjcsMCwxLjUsMC42NzMsMS41LDEuNXYxOCBjMCwwLjgyNy0wLjY3MywxLjUtMS41LDEuNWgtMmMtMC44MjcsMC0xLjUtMC42NzMtMS41LTEuNVYzYzAtMC44MjcsMC42NzMtMS41LDEuNS0xLjVIMTMgTTEzLDFoLTJDOS44OTUsMSw5LDEuODk1LDksM3YxOCBjMCwxLjEwNSwwLjg5NSwyLDIsMmgyYzEuMTA1LDAsMi0wLjg5NSwyLTJWM0MxNSwxLjg5NSwxNC4xMDUsMSwxMywxTDEzLDF6Ij48L3BhdGg+PC9zdmc+Cg=="), linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.03) 100%);
            background-repeat: no-repeat, no-repeat;
            background-position: center center, center;
            background-size: 7px 20px, 100% 100%;
            background-clip: padding-box, padding-box;
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 999px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
                        inset 0 -1px 0 rgba(255,255,255,0.06),
                        0 4px 14px rgba(0,0,0,0.32),
                        0 0 14px rgba(120,160,255,0.10);
            backdrop-filter: blur(10px) saturate(1.15);
            -webkit-backdrop-filter: blur(10px) saturate(1.15);
            min-height: 52px;
            transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
        }
        .dock-win--entreprises .app-grid::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255,255,255,0.13);
            background-size: 7.5px 22px, 100% 100%;
            border-color: rgba(255,255,255,0.22);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.28),
                        inset 0 -1px 0 rgba(255,255,255,0.08),
                        0 6px 18px rgba(0,0,0,0.38),
                        0 0 18px rgba(120,160,255,0.16);
        }
        .dock-win--entreprises .app-grid::-webkit-scrollbar-thumb:active {
            background-color: rgba(255,255,255,0.11);
            filter: brightness(0.96);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
                        0 2px 8px rgba(0,0,0,0.28);
        }
        .dock-win--entreprises .app-grid::-webkit-scrollbar-corner {
            background: transparent;
        }
        /* ligne simple : icone + label côte à côte, style d'origine */
        .dock-win--entreprises .app-grid .app {
            display: flex !important;
            flex-direction: row !important;
            align-items: center;
            gap: 10px;
            width: 100%;
            min-height: calc(var(--ent-icon-size) + 12px);
            flex: 0 0 auto;
            padding: 6px 8px;
            background: transparent;
            border: none;
            border-radius: var(--ent-row-radius);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            text-align: left;
            cursor: pointer;
            opacity: 0;
            transform: translateX(-8px) scale(0.98);
        }
        /* ==========================================================
           ENTREPRISES — STYLE DÉDIÉ ICÔNES (édite ici)
           Ce bloc ne touche QUE les icônes de la frame Entreprises.
           Change les variables ci-dessous, rien d'autre n'est affecté.
           ========================================================== */
        .dock-win--entreprises {
            --ent-icon-size: calc(var(--cell-size) * 0.55);  /* ~85% icone 4x2 (0.65*cell) pour liste lisible */          /* ← taille icône (garde ta valeur, ex: 22px / 1.8em) */
            --ent-icon-radius: calc(var(--ent-icon-size) * 0.35);  /* 35% taille icone */         /* ← arrondi icône */
            --ent-icon-bg: initial;
            --ent-icon-border: initial;
            --ent-icon-shadow: initial;
            --ent-icon-padding: initial;

            --ent-frame-radius: 22px;       /* ← arrondi fenêtre Entreprises */
            --ent-row-radius: 12px;         /* ← arrondi ligne si tu mets un fond */
            --ent-scrollbar-width: 14px;    /* ← largeur scrollbar */
            --ent-scrollbar-thumb-min: 36px;
        }
        /* fenêtre adaptative : hauteur auto jusqu'à max, puis scroll dans la grille */
        .dock-win--entreprises {
            display: flex !important;
            flex-direction: column !important;
            height: auto !important;
            max-height: 70vh !important;
            border-radius: var(--ent-frame-radius) !important;
            overflow: hidden !important;
        }
        /* ===== Header Entreprises ===== */
        .dock-win--entreprises .ent-header {
            flex: 0 0 32px;
            height: 32px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 14px;
            background: rgba(22,22,24,0.72);
            backdrop-filter: blur(14px) saturate(1.15);
            -webkit-backdrop-filter: blur(14px) saturate(1.15);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            /* suit l'arrondi de la fenêtre en haut */
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
            position: sticky;
            top: 0;
            z-index: 5;
        }
        .dock-win--entreprises .ent-close {
            width: 13px;
            height: 13px;
            flex: 0 0 13px;
            border-radius: 50%;
            background: #ff5f56;
            border: 1px solid rgba(0,0,0,0.18);
            box-shadow: 0 0 0 1px rgba(255,59,48,0.18), 0 1px 3px rgba(0,0,0,0.35);
            cursor: pointer;
            padding: 0;
            appearance: none;
            -webkit-appearance: none;
            transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
        }
        .dock-win--entreprises .ent-close:hover {
            filter: brightness(1.08);
            box-shadow: 0 0 0 1px rgba(255,59,48,0.28), 0 1px 4px rgba(0,0,0,0.4);
        }
        .dock-win--entreprises .ent-close:active {
            transform: scale(0.88);
            filter: brightness(0.92);
        }
        /* on masque l'ancien bouton close (top-right) pour Entreprises */
        .dock-win--entreprises .dock-win-close {
            display: none !important;
        }
        /* la grille est coupée sous le header */
        .dock-win--entreprises .app-grid {
            border-top: none;
        }
        .dock-win--entreprises .app-grid .app .app-icon {
            flex: 0 0 auto !important;
            align-self: center !important;
            width: var(--ent-icon-size) !important;
            height: var(--ent-icon-size) !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: var(--ent-icon-size) !important;
            max-height: var(--ent-icon-size) !important;
            aspect-ratio: 1 / 1 !important;
            box-sizing: border-box !important;
            border-radius: var(--ent-icon-radius) !important;
            padding: calc(var(--ent-icon-size) * 0.16) !important;
            font-size: 16px !important;
            overflow: hidden !important;
            /* garde le verre natif — pas de background/border/shadow forcé */
        }
        .dock-win--entreprises .app-grid .app .app-icon svg {
            width: 100% !important;
            height: 100% !important;
        }
        /* tu peux aussi éditer le label ici si besoin */
        .dock-win--entreprises {
            --ent-label-size: 12px;  /* ~13px */
            --ent-label-weight: 500;
            --ent-label-color: rgba(255,255,255,0.85);
        }
        .dock-win--entreprises .app-grid .app .app-label {
            flex: 1 1 auto;
            min-width: 0;
            font-size: var(--ent-label-size) !important;
            font-weight: var(--ent-label-weight) !important;
            color: var(--ent-label-color) !important;
            letter-spacing: 0.02em;
            line-height: 1.2;
            color: rgba(255,255,255,0.85);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* hover aligné sur les autres apps : l'icône prend l'ombre verre */
        .dock-win--entreprises .app-grid .app:hover .app-icon {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.40),
                        inset 0 1px 1px rgba(255,255,255,0.35),
                        0 12px 26px rgba(0,0,0,0.45) !important;
        }
        .dock-win--entreprises .app-grid .app:hover .app-label {
            color: #fff !important;
        }
        /* flèche discrète à droite (optionnel mais clarifie "ligne") */
        .dock-win-open.dock-win--entreprises .app-grid .app {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
        .dock-win-open.dock-win--entreprises .app:nth-child(1) { transition-delay: 0.16s; }
        .dock-win-open.dock-win--entreprises .app:nth-child(2) { transition-delay: 0.20s; }
        .dock-win-open.dock-win--entreprises .app:nth-child(3) { transition-delay: 0.24s; }
        .dock-win-open.dock-win--entreprises .app:nth-child(4) { transition-delay: 0.28s; }
        .dock-win-open.dock-win--entreprises .app:nth-child(5) { transition-delay: 0.32s; }
        .dock-win-open.dock-win--entreprises .app:nth-child(6) { transition-delay: 0.36s; }
        .dock-win-open.dock-win--entreprises .app:nth-child(7) { transition-delay: 0.40s; }
        .dock-win-open.dock-win--entreprises .app:nth-child(8) { transition-delay: 0.44s; }
        /* hover desktop */
        .dock-win--entreprises .app-grid .app:hover {
            background: transparent;
            transform: translateX(1px) scale(1.02);
        }
        .dock-win--entreprises .app-grid .app:active {
            transform: scale(0.98);
        }
        .dock-win--entreprises .dock-win-close {
            position: absolute;
            top: 0.7em;
            right: 0.7em;
            z-index: 5;
        }

        /* ===== Écran de chargement redirection ===== */
        #redirect-loader {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(10, 10, 14, 0.55);
            backdrop-filter: blur(10px) saturate(1.15);
            -webkit-backdrop-filter: blur(10px) saturate(1.15);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        #redirect-loader.visible {
            opacity: 1;
            pointer-events: auto;
        }
        #redirect-loader .redirect-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            padding: 32px 44px;
            border-radius: 22px;
            background: rgba(20, 20, 24, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.16);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22),
                0 20px 50px rgba(0, 0, 0, 0.5);
            color: #fff;
            font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
        }
        #redirect-loader .redirect-spinner-wrap {
            position: relative;
            width: 64px;
            height: 64px;
        }
        #redirect-loader .redirect-spinner {
            position: absolute;
            inset: 0;
            margin: auto;
            animation: redirect-spin 0.8s linear infinite;
        }
        #redirect-loader .redirect-spinner--main {
            width: 46px;
            height: 46px;
            z-index: 2;
        }
        #redirect-loader .redirect-spinner--ghost {
            width: 46px;
            height: 46px;
            z-index: 1;
            animation-duration: 0.666s; /* 1,2x plus vite que 0,8s */
        }
        @keyframes redirect-spin {
            to { transform: rotate(360deg); }
        }
        #redirect-loader .redirect-text {
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 0.01em;
        }
        #redirect-loader .redirect-sub {
            font-size: 13px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.6);
        }