/* te-gate.css — Voile de pause et de maintenance V3. * * Rien n'est visible par défaut : tout est conditionné à une classe posée sur * par scripts/te-gate.js, lui-même conditionné aux drapeaux `pause` et * `maintenance` de parametres/flags.js. Un fichier de drapeaux absent ou cassé * n'affiche donc rien — mieux vaut pas de voile qu'un voile qui ment. * * Deux temps volontaires : * 1. le VOILE est peint par html.te-gate::before, donc dès le premier pixel, * sans attendre que le corps de page existe ; * 2. la CARTE de message est injectée dans juste après, par le script. * Entre les deux, la page est déjà couverte : à aucun moment le site ne * s'affiche à nu. * * Maquettes de référence : mockups/pause-v3/retenu-01-pause.html, * retenu-02-maintenance.html et retenu-05-owner.html. */ /* ============================================================ 1. LE VOILE — posé sur , donc avant tout le reste ============================================================ */ html.te-gate::before { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: rgba(4, 21, 31, .58); backdrop-filter: blur(9px) saturate(.85); -webkit-backdrop-filter: blur(9px) saturate(.85); } /* Maintenance : voile plus léger que la pause. L'utilisateur est en train de travailler, on ne le met pas dehors — on l'interrompt. */ html.te-gate--maintenance::before { background: rgba(4, 21, 31, .46); backdrop-filter: blur(6px) saturate(.9); -webkit-backdrop-filter: blur(6px) saturate(.9); } /* Repli sans backdrop-filter (Firefox ancien, navigateurs embarqués) : le flou n'existe pas, donc le voile doit devenir franchement opaque. Sans cette règle, le site resterait parfaitement lisible sous un simple assombrissement. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.te-gate::before, html.te-gate--maintenance::before { background: rgba(4, 21, 31, .94); } } /* Le défilement de la page couverte n'a plus de sens, et il déplacerait le contenu sous le voile. Le calque, lui, défile pour son propre compte. */ html.te-gate, html.te-gate body { overflow: hidden; } /* Compensation de la barre de défilement. `overflow: hidden` fait disparaître l'ascenseur : la page gagne d'un coup sa largeur (~15 px sous Windows et sur un Mac réglé en barres permanentes) et tout le contenu glisse vers la droite — visible au moment où le voile tombe, et de nouveau quand il se lève. On rend cette largeur sous forme de padding, mesurée en JS juste avant la pose (te-gate.js > mesurerBarreDefilement). Posé sur et non sur : body porte souvent déjà un padding, qu'on écraserait. Le voile et le calque sont en `position: fixed`, donc calés sur la fenêtre — ce padding ne les décale pas. Sur un Mac en barres flottantes, la mesure vaut 0 : aucune compensation. */ html.te-gate { padding-right: var(--te-gate-compensation, 0px); } /* ============================================================ 1 bis. L'ANIMATION — bascule EN DIRECT seulement (frein à main) ============================================================ ⚠️ Rien de tout ceci ne joue au CHARGEMENT d'une page. Un visiteur qui arrive alors que le site est déjà fermé doit voir le voile dès le premier pixel : l'animer reviendrait à lui montrer le contenu une demi-seconde avant de le couvrir, et à le faire à chaque page. Les règles ci-dessous sont donc conditionnées à `te-gate--anime` / `te-gate--sortie`, deux classes que seul le frein à main pose (te-gate.js > appliquerFrein), jamais la mise en place. Le flou n'est PAS ajouté pour l'occasion : le voile de maintenance porte déjà `backdrop-filter: blur(6px)`. On anime son arrivée, ce qui est composité par le GPU — contrairement à un `filter` posé sur la page, qui forcerait un repaint de tout le DOM (coûteux sur iPad et sur les pages d'administration). Durées volontairement asymétriques : on ferme en 380 ms (on annonce, on laisse comprendre), on rouvre en 220 ms (on rend la main, personne n'attend). */ @keyframes te-gate-voile-entree { from { opacity: 0; backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); } to { opacity: 1; } } @keyframes te-gate-voile-sortie { from { opacity: 1; } to { opacity: 0; backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); } } @keyframes te-gate-carte-entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes te-gate-carte-sortie { from { opacity: 1; } to { opacity: 0; } } html.te-gate--anime::before { animation: te-gate-voile-entree 380ms cubic-bezier(.22, .61, .36, 1) both; } html.te-gate--anime .te-gate-layer { animation: te-gate-carte-entree 380ms cubic-bezier(.22, .61, .36, 1) both; } /* Sortie : la classe `te-gate` est retirée SEULEMENT à la fin de l'animation, sinon le pseudo-élément disparaîtrait d'un coup, sans transition. */ html.te-gate--sortie::before { animation: te-gate-voile-sortie 220ms ease-in both; } html.te-gate--sortie .te-gate-layer { animation: te-gate-carte-sortie 160ms ease-in both; } /* La pastille owner apparaît et disparaît elle aussi en douceur — elle surgit en bas de l'écran d'un owner qui est peut-être en train de travailler. */ @keyframes te-gate-pastille-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .te-gate-ownerbar { animation: te-gate-pastille-entree 260ms cubic-bezier(.22, .61, .36, 1) both; } /* Réglage système « réduire les animations » : on respecte, sans rien perdre — le voile est là ou il n'est pas, immédiatement. */ @media (prefers-reduced-motion: reduce) { html.te-gate--anime::before, html.te-gate--anime .te-gate-layer, html.te-gate--sortie::before, html.te-gate--sortie .te-gate-layer, .te-gate-ownerbar { animation: none !important; } } /* ============================================================ 2. LE CALQUE — la carte de message, injectée dans ============================================================ */ .te-gate-layer { position: fixed; inset: 0; z-index: 2147483100; display: grid; place-items: center; padding: 2rem 1.25rem; overflow-y: auto; font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } .te-gate-card { position: relative; overflow: hidden; width: min(560px, 100%); padding: 2.25rem 2rem; border-radius: 14px; background: #ffffff; box-shadow: 0 24px 60px rgba(4, 21, 31, .45); text-align: center; color: #04151F; } /* Liseré en haut de carte. Depuis l'alignement des deux modes (2026-08-22), il est le principal signe distinctif : bleu pour une fermeture décidée, orange pour une interruption subie. Il a remplacé l'étiquette « Service interrompu », qui faisait doublon avec le titre. ⚠️ La couleur ne porte jamais l'information seule : le titre, la pastille et la dernière ligne disent déjà de quel mode il s'agit. */ .te-gate-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand, #004777), #2E7BAA); } .te-gate-card--service::before { background: linear-gradient(90deg, var(--warning, #FF7700), #FFB570); } /* ---------- Logo sablier qui s'écoule (les deux modes) ---------- */ /* Depuis le 2026-08-22, le logo coiffe les DEUX modes : c'est lui qui rend l'écran reconnaissable comme Time-ECOS. Le sablier dit « attendez » dans les deux cas ; la maintenance ajoute par-dessus une barre d'activité, qui dit en plus « ça travaille, maintenant » — ce qu'une fermeture décidée ne dit pas. Même technique que DATA/styles/pause.css : le vrai /logo.svg sert de masque, et c'est le dégradé de fond qui descend — le sable s'écoule puis se reforme, sans retournement. Transposé ici sur fond clair. */ .te-gate-mark { width: 72px; height: 72px; margin: 0 auto 1.1rem; background: linear-gradient(to bottom, var(--brand, #004777) 0%, var(--brand, #004777) 46%, rgba(0, 71, 119, .18) 54%, rgba(0, 71, 119, .14) 100%); background-size: 100% 220%; background-repeat: no-repeat; /* Le sable part du BAS et remonte : le sablier se REMPLIT. Le sens inverse (2026-08-22) donnait un logo qui pâlissait du haut vers le bas — lu comme un sablier qui se vide, l'effet contraire de celui voulu. */ background-position: 0% 100%; -webkit-mask: url('/logo.svg') center / contain no-repeat; mask: url('/logo.svg') center / contain no-repeat; animation: te-gate-hourglass 7s ease-in-out infinite; } @keyframes te-gate-hourglass { 0% { background-position: 0% 100%; } 70% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } } /* ---------- Pastille « Service interrompu » ---------- */ /* [V3-DESIMPL — 2026-08-22] Plus construite par te-gate.js depuis l'alignement des deux modes : elle faisait doublon avec le titre, qui annonce déjà l'indisponibilité. Styles conservés — la remettre ne demanderait qu'une ligne dans construireCarte(). Raison : maquette « variante B », validée par QG. */ .te-gate-kicker { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 119, 0, .12); border: 1px solid rgba(255, 119, 0, .35); color: #A44A00; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .te-gate-kicker svg { width: 15px; height: 15px; } .te-gate-title { margin: 0; font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--brand, #004777); } /* Plus d'étiquette au-dessus du titre : les deux modes ont le même rythme. */ .te-gate-lead { margin: .6rem 0 0; font-size: 1rem; line-height: 1.5; color: #6b7280; } .te-gate-lead strong { color: #04151F; } /* ---------- Barre d'activité indéterminée ---------- */ /* Indéterminée à dessein : on ne connaît pas l'avancement, on ne le simule pas. */ .te-gate-progress { height: 3px; width: 74%; margin: 1.25rem auto 0; border-radius: 999px; background: rgba(0, 71, 119, .1); overflow: hidden; } .te-gate-progress::after { content: ""; display: block; height: 100%; width: 38%; border-radius: 999px; background: linear-gradient(90deg, var(--accent, #00AFB5), var(--brand, #004777)); animation: te-gate-slide 1.7s ease-in-out infinite; } @keyframes te-gate-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(300%); } } /* ---------- Pastille de durée / de réouverture ---------- */ .te-gate-badge { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; padding: .5rem .9rem; border-radius: 999px; background: rgba(0, 175, 181, .12); color: #046b70; font-size: .875rem; font-weight: 700; } .te-gate-badge svg { width: 16px; height: 16px; } .te-gate-badge--service { background: rgba(255, 119, 0, .12); color: #A44A00; } /* ---------- Dernière ligne ---------- */ .te-gate-foot { display: inline-flex; align-items: center; gap: .45rem; margin: 1.1rem 0 0; font-size: .8125rem; font-weight: 600; color: #5b6b76; } .te-gate-foot svg { width: 15px; height: 15px; flex: 0 0 auto; } /* ---------- Actions ---------- */ .te-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; } .te-gate-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.35rem; border-radius: 999px; font-size: .9375rem; font-weight: 700; text-decoration: none; } .te-gate-btn svg { width: 18px; height: 18px; } .te-gate-btn--primary { background: var(--brand, #004777); color: #fff; } .te-gate-btn--primary:hover { background: #013a61; } .te-gate-btn--ghost { border: 1px solid #e5e7eb; color: #04151F; } .te-gate-btn--ghost:hover { background: #EEF6FB; } .te-gate-btn:focus-visible { outline: 3px solid var(--accent, #00AFB5); outline-offset: 3px; } /* ============================================================ 3. LA PASTILLE OWNER — quand le voile a été levé ============================================================ */ /* L'owner n'est pas voilé : il navigue sur un site qui a l'air ouvert alors qu'il est fermé pour toute la faculté. Sans rappel permanent, on oublie de lever la pause. Flottante et non fermable : un bandeau en haut pousserait la page et fausserait justement la mise en page qu'il vient vérifier. */ .te-gate-ownerbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2147483200; display: flex; align-items: center; gap: .65rem; max-width: calc(100% - 2rem); padding: .55rem .95rem; border-radius: 999px; background: rgba(4, 21, 31, .92); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: .8125rem; line-height: 1.35; box-shadow: 0 8px 24px rgba(4, 21, 31, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .te-gate-ownerbar svg { flex: 0 0 auto; width: 16px; height: 16px; } .te-gate-ownerbar-mode { flex: 0 0 auto; padding: .15rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .te-gate-ownerbar-how { color: rgba(255, 255, 255, .62); } .te-gate-ownerbar--maintenance { border-color: rgba(255, 119, 0, .5); } .te-gate-ownerbar--maintenance .te-gate-ownerbar-mode { background: var(--warning, #FF7700); color: #1F1300; } .te-gate-ownerbar--maintenance svg { color: #FFB570; } .te-gate-ownerbar--pause .te-gate-ownerbar-mode { background: #67E8F9; color: #04212F; } .te-gate-ownerbar--pause svg { color: #67E8F9; } /* Ouverture forcée par le frein à main : le site est OUVERT alors que le fichier le ferme. Vert — il n'y a pas d'incident — mais bien visible : cet état ne tient que tant que la RTDB répond, et on l'oublie très vite. */ .te-gate-ownerbar--ouvert { border-color: rgba(74, 222, 128, .5); } .te-gate-ownerbar--ouvert .te-gate-ownerbar-mode { background: #4ADE80; color: #052E16; } .te-gate-ownerbar--ouvert svg { color: #4ADE80; } /* ============================================================ 4. Accessibilité et petits écrans ============================================================ */ @media (prefers-reduced-motion: reduce) { .te-gate-mark, .te-gate-progress::after { animation: none; } .te-gate-mark { background-position: 0% 0%; } } @media (max-width: 560px) { .te-gate-card { padding: 1.75rem 1.25rem; } .te-gate-mark { width: 60px; height: 60px; } .te-gate-ownerbar { flex-wrap: wrap; justify-content: center; text-align: center; border-radius: 14px; } /* Le rappel du mode et l'état suffisent sur un petit écran ; la marche à suivre pour lever le voile n'est de toute façon pas exécutable là. */ .te-gate-ownerbar-how { display: none; } } /* Pastille ANCRÉE à côté du badge d'environnement (2026-09-04) : dans le flux, compacte — l'icône et le mot du mode, au gabarit du badge voisin. L'état et la marche à suivre sont portés par `title` / `aria-label`, plus par le texte. Placée après la règle mobile pour reprendre la main sur son enroulement. */ .te-gate-ownerbar--ancree { position: static; transform: none; flex-wrap: nowrap; gap: .35rem; max-width: none; margin: 0 0 0 8px; padding: .3rem .65rem .3rem .5rem; border-radius: 999px; font-size: .72rem; line-height: 1.2; box-shadow: 0 2px 8px rgba(4, 21, 31, .22); backdrop-filter: none; -webkit-backdrop-filter: none; } .te-gate-ownerbar--ancree svg { width: 14px; height: 14px; } .te-gate-ownerbar--ancree .te-gate-ownerbar-mode { padding: 0; background: transparent; color: #fff; font-size: inherit; }