/* * Feuille de style de l'affichage mural EDT (Polytech Lyon). * Aucune étape de build : ce fichier est servi tel quel (section 3.3 du cahier des charges). * Les couleurs de filière sont injectées en variables CSS par ecrans.partials.couleurs * (source unique : config/ecrans-edt.json) ; ce fichier ne contient que la mise en page. */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/roboto-condensed-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/roboto-condensed-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Eurostile T'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/eurostile-t.woff2') format('woff2'); } :root { --police-entete: 'Eurostile T', Arial, Helvetica, sans-serif; --police-grille: 'Roboto Condensed', Arial, Helvetica, sans-serif; --gris-neutre-fond: #F2F4F6; --gris-neutre-texte: #3D444A; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; /* Gris neutre visible uniquement quand le viewport n'est pas exactement 16:9 (barres de navigateur en développement) : sur Neoscreen en plein écran à 1920x1080, invisible. */ background: #2b2f33; overflow: hidden; font-family: var(--police-grille); font-variant-numeric: tabular-nums; } /* * Gabarit fixe 1920x1080 (section 7.1) : sur un téléviseur Neoscreen en plein écran à cette * résolution, .ecran occupe exactement le viewport, échelle 1, aucun effet du bloc ci-dessous. * Sur un poste de développement plus petit, ecrans.js calcule un facteur d'échelle pour que la * page tienne entièrement à l'écran sans avoir à zoomer/dézoomer manuellement dans le * navigateur — c'est un ajustement d'affichage pour la prévisualisation, pas un mode * responsive : la mise en page interne reste calculée pour 1920x1080 dans tous les cas. */ .ecran { width: 1920px; height: 1080px; position: absolute; /* Valeurs par défaut = plein écran (scale 1). Le script inline dans les recalcule de façon synchrone avant le premier rendu, pour éviter tout flash / saut visuel au chargement (voir show.blade.php). */ top: var(--ecran-top, 0px); left: var(--ecran-left, 0px); transform: scale(var(--ecran-scale, 1)); transform-origin: top left; /* Marge de sécurité overscan (section 7.1), configurable via ecrans_edt.affichage.marge_overscan_px (voir --marge-overscan dans show.blade.php). */ padding: var(--marge-overscan, 40px); display: flex; flex-direction: column; background: #ffffff; } /* ---------- Bandeau de titre (7.7) ---------- */ .bandeau-titre { height: 104px; flex: 0 0 104px; display: flex; align-items: center; gap: 20px; background: var(--gris-neutre-fond); border-bottom: 2px solid #D7DCE1; padding: 0 24px; font-family: var(--police-entete); } .bandeau-titre__logos { display: flex; align-items: center; gap: 16px; height: 80px; } .bandeau-titre__logos img { height: 80px; width: auto; display: block; } .bandeau-titre__promo { font-size: 40px; font-weight: 700; color: var(--bleu-nuit-polytech, #004A75); white-space: nowrap; } .bandeau-titre__droite { margin-left: auto; display: flex; align-items: center; gap: 28px; } .bandeau-titre__date { font-size: 26px; color: #3D444A; text-transform: capitalize; } .bandeau-titre__horloge { font-size: 44px; font-weight: 700; color: var(--bleu-nuit-polytech, #004A75); font-family: var(--police-grille); } /* ---------- Avertissement projet ADE divergent (4.3 / 8) ---------- */ .avertissement-projet { flex: 0 0 auto; background: #FCEEDC; border-bottom: 2px solid #E0A44A; color: #6B4000; font-size: 18px; padding: 6px 24px; font-family: var(--police-entete); } /* ---------- En-têtes de colonnes (7.2) ---------- */ .entetes-colonnes { flex: 0 0 58px; display: grid; /* Nombre de filières variable selon la promotion (section 4.2) : jamais figé à 6, pour que les colonnes se répartissent la largeur entière plutôt que de laisser un vide. */ grid-template-columns: 96px repeat(var(--nb-colonnes, 6), 1fr); background: var(--gris-neutre-fond); } .entetes-colonnes__heure { /* cellule vide au-dessus de la colonne des heures */ } .entete-colonne { display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; color: #2A2F33; border-bottom: 3px solid var(--bordure, #8A9BA7); border-left: 1px solid #ffffff; } /* ---------- Grille horaire 8h-19h (5.3 / 7.2) ---------- */ .grille-wrapper { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 96px repeat(var(--nb-colonnes, 6), 1fr); position: relative; } .grille-heures { position: relative; border-right: 1px solid #D7DCE1; } .grille-heures__repere { position: absolute; left: 0; right: 8px; text-align: right; font-size: 20px; color: #6B7178; font-variant-numeric: tabular-nums; } /* Le repère (tick) reste toujours exactement sur la ligne d'heure ; seul le texte se déplace au-dessus/en-dessous pour les bornes 8h/19h (voir les modificateurs plus bas). */ .grille-heures__repere::after { content: ''; position: absolute; right: -8px; top: 0; width: 6px; height: 1px; background: #D7DCE1; } .grille-heures__repere__label { display: inline-block; transform: translateY(-50%); } .grille-heures__repere--premier .grille-heures__repere__label { transform: translateY(0); } .grille-heures__repere--dernier .grille-heures__repere__label { transform: translateY(-100%); } /* * Lignes horizontales d'heure, superposées à toute la largeur des colonnes. Positionnées * explicitement via GridMath (même calcul que les événements), plutôt qu'avec un dégradé CSS * répété : ce dernier s'est révélé sujet à des arrondis sous-pixel selon les navigateurs, * faisant parfois disparaître ou décaler la dernière ligne (ex. 18h) près du bord inférieur. */ .grille-lignes-heures { position: absolute; top: 0; left: 96px; right: 0; height: 100%; pointer-events: none; } .grille-ligne-heure { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #E7E9EB; } .grille-colonnes { display: contents; } .colonne { position: relative; border-left: 1px solid #EDEFF1; } .colonne__corps { position: relative; height: 100%; } .colonne__erreur { position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; color: #8A2E2E; background: #FBEAEA; border: 1px dashed #D98C8C; border-radius: 6px; padding: 12px; } /* Bandeau pleine largeur (5.9), superposé aux colonnes */ .pleine-largeur { position: absolute; top: 0; left: 96px; right: 0; height: 100%; pointer-events: none; } .pleine-largeur .evt { pointer-events: auto; left: 0 !important; width: 100% !important; } /* Repère d'heure courante (7.5) */ .repere-heure { position: absolute; left: 96px; right: 0; height: 0; border-top: 3px solid #D8272C; z-index: 20; } .repere-heure::before { content: attr(data-heure); position: absolute; left: -92px; top: -12px; width: 84px; text-align: right; font-size: 20px; font-weight: 700; color: #D8272C; font-variant-numeric: tabular-nums; } /* ---------- Événements ---------- */ .evt { position: absolute; overflow: hidden; border-radius: 4px; padding: 4px 8px; box-sizing: border-box; background: var(--fond, #E2EBF1); border-left: 4px solid var(--bordure, #004A75); color: var(--texte, #00293F); /* La salle est l'information prioritaire (section 1) : sur un créneau très court, c'est l'intitulé du cours qui doit être rogné en premier, jamais l'horaire ni la salle. */ display: flex; flex-direction: column; } .evt__horaire { order: 1; flex: 0 0 auto; font-size: 22px; font-weight: 600; line-height: 1.1; } .evt__salle { order: 2; flex: 0 0 auto; font-size: 34px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .evt__titre { order: 3; flex: 1 1 auto; min-height: 0; font-size: 26px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .evt__badge { position: absolute; top: 4px; right: 6px; max-width: calc(100% - 12px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 22px; font-weight: 700; background: #2A2F33; color: #ffffff; border-radius: 999px; padding: 2px 10px; line-height: 1.3; box-sizing: border-box; } /* Une couleur par chiffre de groupe (GR1/GR2...), pour les distinguer sans lire le texte. */ .evt__badge--1 { background: #0B5FA5; } .evt__badge--2 { background: #B5530A; } .evt__badge--3 { background: #4B7A2E; } .evt--blocage, .evt--pleine-largeur { background: var(--blocage-fond, #ECEEF0); border-left-color: var(--blocage-bordure, #8A9BA7); color: var(--blocage-texte, #3D444A); } .evt--blocage .evt__salle { display: none; } /* * Rotation automatique (ecrans.js) : quand plusieurs cours simultanés partagent une colonne, * toutes les cartes restent visibles en permanence, mais leur largeur respective change en * boucle — l'une prend l'essentiel de la place (salle et intitulé lisibles), les autres se * réduisent à un bandeau étroit qui signale leur présence sans les cacher (section 5.8). */ .evt[data-cluster] { transition: left 0.6s ease, width 0.6s ease; } /* Le badge de groupe n'a de place que sur la carte active (90%) ; il serait tronqué ou se superposerait au contenu sur les cartes réduites à un bandeau étroit. */ .evt[data-cluster]:not(.evt--cycle-actif) .evt__badge { display: none; } .evt--aggregate { background: #ECEEF0; border-left-color: #8A9BA7; color: #3D444A; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* ---------- Pied de page (7.7) ---------- */ .pied-de-page { flex: 0 0 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-family: var(--police-entete); font-size: 18px; color: #6B7178; border-top: 2px solid #D7DCE1; } .pied-de-page__fraicheur.perime { color: #C0272D; font-weight: 700; } /* ---------- États dégradés (section 8) ---------- */ .etat-page { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; color: #3D444A; } .etat-page__titre { font-size: 40px; font-weight: 700; } .etat-page__detail { font-size: 24px; color: #6B7178; }