/* ============================================================================= Intra-RH — CLOCHE DE NOTIFICATIONS F25 PARTAGÉE (D-196/Q177, 15/08) Styles du COMPOSANT TRANSVERSE chargé par TOUS les modules : la cloche/badge vit dans l'en-tête commun (.entete-module > .entete-actions) et le panneau d'actions est une boîte de dialogue PAR-DESSUS la page en cours (contrat T-17 — pattern Gmail/Slack « My Tasks »), injectée par cloche.js. Extrait du module centre-notifications (T-17.1) dont il reprend les styles À L'IDENTIQUE — source unique transverse, jamais de copie locale. Variables de la charte partagée (/assets/style.css — socle T-13, D-193). Les classes .badge / .bouton / .chargement / .message-vide utilisées ici existent déjà dans les 7 modules (palette §0.3 des wireframes) ; .encart-erreur est redéfini scopé sous .panneau-contenu pour les modules qui ne le portent pas. ============================================================================= */ /* Cloche + badge numérique F25 (D-076) — en-tête commun */ .bouton-cloche { position: relative; font: inherit; font-size: 1.25rem; line-height: 1; padding: 0.45rem 0.6rem; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); color: inherit; cursor: pointer; } .bouton-cloche:hover { background: rgba(255, 255, 255, 0.22); } .badge-compteur { position: absolute; top: -0.45rem; right: -0.45rem; min-width: 1.15rem; text-align: center; box-shadow: 0 0 0 2px var(--couleur-carte); } /* Même garde D-252/T-17.1 que .panneau-fond[hidden] : le display:inline-block de .badge primerait sinon sur la règle UA [hidden] et la pastille rouge resterait visible (vide) quand le compteur est à 0. */ .badge-compteur[hidden] { display: none; } /* -------------------------------------------------------------------------- Panneau d'actions — boîte de dialogue inbox PAR-DESSUS la page (F25, pattern Gmail/Slack « My Tasks »). AUCUN traitement inline : chaque item pointe vers l'écran de traitement existant. -------------------------------------------------------------------------- */ .panneau-fond { position: fixed; inset: 0; /* D-252/T-17.1 : sur mobile, quand le contenu d'un module dépasse la largeur d'écran, le navigateur ÉLARGIT le viewport de mise en page (layout viewport) au-delà de l'écran réel — inset:0 taille alors le voile sur ce viewport élargi et le panneau qui s'y centre se retrouve tronqué à droite (bouton Fermer hors écran — mesuré : page planning à 572 px de layout pour 375 px d'écran). Le plafond 100vw/100vh recale le voile sur le viewport VISUEL (vw reste basé sur la largeur d'écran réelle même en cas d'élargissement) ; en LTR, left:0 prime pour le positionnement. Desktop inchangé : 100vw y est >= au viewport. */ max-width: 100vw; max-height: 100vh; z-index: 55; background: rgba(29, 39, 51, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 1rem; overflow-y: auto; } /* D-252/T-17.1 : `hidden` DOIT primer sur `display: flex`. La règle UA `[hidden] { display: none }` est une déclaration d'origine navigateur non importante : TOUTE règle auteur de display la bat (vérifié sous Chromium — le voile restait affiché en permanence dès le chargement, interceptait tous les clics de la page, cloche comprise, et figeait le panneau sur le « Chargement… » du gabarit initial). */ .panneau-fond[hidden] { display: none; } .panneau { background: var(--couleur-carte); border-radius: 0.75rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* D-252/T-17.1 — mobile-first, même patron que les 7 modules : 100 % de la boîte de contenu du voile (son padding d'1rem garantit les gouttières des deux côtés sur tout viewport étroit), plafonné à 40 rem sur desktop. Remplace width: min(94vw, 40rem) — 94vw (352,5 px à 375 px) excédait la boîte disponible (343 px) et ne tenait que par flex-shrink, sans garde contre les contenus incassables. overflow-wrap: un jeton long incassable (message d'erreur API brut, identifiant technique) coupe au lieu de pousser hors du panneau. */ width: 100%; max-width: 40rem; overflow-wrap: anywhere; margin-top: 4vh; padding: 1rem 1.25rem 1.25rem; } .panneau-entete { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid var(--couleur-bordure); padding-bottom: 0.6rem; } .panneau-entete h2 { font-size: 1.1rem; margin: 0; } .panneau-note { font-size: 0.75rem; color: var(--couleur-discret); margin: 0.5rem 0 0.75rem; } /* Erreur affichée EN CLAIR dans le panneau (jamais silencieuse) — scopée : .encart-erreur n'existe pas dans le CSS de tous les modules. */ .panneau-contenu .encart-erreur { background: #fbeeee; border: 1px solid #e5a9a4; color: var(--couleur-alerte); border-radius: 0.5rem; padding: 0.6rem 0.8rem; font-size: 0.85rem; margin: 0.75rem 0; } .groupe-service { margin-bottom: 1rem; } .groupe-service .groupe-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; } .groupe-service .groupe-entete h3 { font-size: 0.95rem; margin: 0; } .groupe-service .groupe-action { margin-left: auto; font-size: 0.8rem; color: var(--couleur-accent); text-decoration: none; } .groupe-service .groupe-action:hover { text-decoration: underline; } .item-action { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; padding: 0.55rem 0.6rem; border: 1px solid var(--couleur-bordure); border-radius: 0.5rem; margin-bottom: 0.4rem; background: var(--couleur-fond-bloc); font-size: 0.88rem; } .item-action .item-libelle { font-weight: 600; } .item-action .item-meta { font-size: 0.75rem; color: var(--couleur-discret); } .item-action .item-lien { margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--couleur-accent); text-decoration: none; } .item-action .item-lien:hover { text-decoration: underline; }