/* style.css — Thème clair inspiré de Weathercloud : cartes blanches, accent bleu, chips rouge (Max) / bleu (Min). */ /* Thème clair (par défaut). L'attribut data-theme est posé sur par le script d'en-tête selon la préférence stockée dans le navigateur. */ :root { --fond: #eef1f4; --fond-2: #f2f5f7; --carte: #ffffff; --bordure: #e2e6ea; --bordure-2: #f0f2f4; --texte: #3c4650; --texte-2: #76828e; --accent: #29a3d4; --accent-fonce: #1c7fa5; --max: #c62828; --min: #2286a5; --survol: #e8f5fb; --rayure: #fafbfc; --grille: #eef1f4; --periode-fond: #ddf1fa; --erreur-fond: #fdf0f0; --desactive: #c8ced4; --extreme-max-fond: #fdeaea; --extreme-max-texte: #b32020; --extreme-min-fond: #e4f1fa; --extreme-min-texte: #14608f; --ombre: 0 1px 3px rgba(30, 40, 50, 0.08); --voile-defilement: rgba(30, 40, 50, 0.18); } /* Thème sombre */ :root[data-theme='sombre'] { --fond: #151b21; --fond-2: #28323b; --carte: #1e262e; --bordure: #313c46; --bordure-2: #2a343d; --texte: #d5dce2; --texte-2: #93a0ad; --accent: #29a3d4; --accent-fonce: #5cc0e4; --max: #e35b5b; --min: #46aacd; --survol: #253947; --rayure: #222c34; --grille: #2b3640; --periode-fond: #14384a; --erreur-fond: #43262b; --desactive: #4d5964; --extreme-max-fond: rgba(227, 91, 91, 0.20); --extreme-max-texte: #f29b9b; --extreme-min-fond: rgba(70, 170, 205, 0.20); --extreme-min-texte: #7fcdec; --ombre: 0 1px 3px rgba(0, 0, 0, 0.5); --voile-defilement: rgba(0, 0, 0, 0.45); } /* --------------------------------------------------------------------------- Échelle typographique — SIX marches, et six seulement. L'interface avait dérivé jusqu'à 21 tailles distinctes (10, 10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 15, 15.5, 16, 18, 19, 21, 24, 52…) : des écarts d'un demi-pixel ne créent aucune hiérarchie perceptible, seulement du flou. Toute nouvelle règle doit utiliser une de ces variables, jamais une valeur littérale. Exception assumée : les pictogrammes (⛅ du bandeau, ⛅ de la rubrique « À propos », chevrons de navigation) sont dimensionnés à part — ce sont des images, pas du texte. --------------------------------------------------------------------------- */ :root { --txt-xs: 11px; /* mentions, chips, unités secondaires */ --txt-sm: 12.5px; /* tableaux, libellés, textes d'aide */ --txt-md: 14px; /* texte courant */ --txt-lg: 16px; /* titres de cartes */ --txt-xl: 20px; /* titres de section, valeurs de synthèse */ --txt-hero: 48px; /* valeur dominante de la bande de synthèse */ /* Densité des tableaux de données (voir le bloc « Tableaux » plus bas). */ --cellule-compacte: 6px 10px; --cellule-aeree: 10px 12px; } /* Sur petit écran, toute l'échelle descend d'un cran : une seule règle remplace la douzaine de réajustements manuels qui traînaient auparavant. */ @media (max-width: 700px) { :root { --txt-xs: 10.5px; --txt-sm: 11.5px; --txt-md: 13px; --txt-lg: 14px; --txt-xl: 17px; --txt-hero: 40px; } } /* Les champs de saisie suivent le thème. */ input, select, textarea { background: var(--carte); color: var(--texte); } /* …et l'échelle : sans cette règle, les contrôles de formulaire retombent sur la taille par défaut du navigateur (13,33 px), hors de toute échelle. */ input, select, textarea, button { font-size: var(--txt-md); } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--fond); color: var(--texte); font-size: var(--txt-md); } /* ------------------------------ En-tête ------------------------------ */ /* L'en-tête et la barre de période restent visibles pendant le défilement : sur un tableau de bord haut de plusieurs écrans, perdre la navigation ET la date consultée rendait l'orientation difficile. */ .entete { background: var(--carte); border-bottom: 1px solid var(--bordure); display: flex; align-items: center; gap: 24px; padding: 0 20px; flex-wrap: wrap; position: sticky; top: 0; z-index: 100; } /* Menu déroulant de navigation : masqué sur grand écran, il remplace les onglets et le titre sur mobile (voir la règle @media en bas de fichier). */ .onglets-mobile { display: none; flex: 1; min-width: 0; border: 1px solid var(--bordure); border-radius: 8px; padding: 9px 10px; font: inherit; font-weight: 600; font-size: var(--txt-md); color: var(--texte); background: var(--carte); } .entete-titre { display: flex; align-items: center; gap: 10px; padding: 10px 0; } .entete-titre h1 { font-size: var(--txt-xl); font-weight: 500; margin: 0; color: var(--texte); } .logo { font-size: 26px; } .onglets { display: flex; gap: 4px; flex-wrap: wrap; } .onglets button { border: none; background: none; font: inherit; color: var(--texte-2); padding: 16px 14px 13px; cursor: pointer; border-bottom: 3px solid transparent; } .onglets button:hover { color: var(--texte); } .onglets button.actif { color: var(--accent-fonce); border-bottom-color: var(--accent); font-weight: 600; } /* Actions d'en-tête (haut droite) : aide + apparence */ .zone-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .bouton-entete { border: 1px solid var(--bordure); background: var(--carte); color: var(--texte-2); border-radius: 6px; padding: 6px 12px; font: inherit; cursor: pointer; white-space: nowrap; } .bouton-entete:hover { color: var(--texte); background: var(--survol); } /* Menu Apparence : préférence locale au navigateur */ .zone-apparence { position: relative; } .zone-apparence summary { list-style: none; cursor: pointer; border: 1px solid var(--bordure); background: var(--carte); color: var(--texte-2); border-radius: 6px; padding: 6px 12px; white-space: nowrap; } .zone-apparence summary:hover { color: var(--texte); background: var(--survol); } .zone-apparence details > div { position: absolute; right: 0; z-index: 100; background: var(--carte); border: 1px solid var(--bordure); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); padding: 8px 12px; min-width: 140px; } .zone-apparence label { display: block; padding: 4px 0; cursor: pointer; white-space: nowrap; } /* Séparateur et bascule (actualisation auto) dans le menu Apparence. */ .zone-apparence .menu-separateur { height: 1px; background: var(--bordure); margin: 6px -12px; } .zone-apparence .option-bascule { display: flex; align-items: center; gap: 6px; } /* -------------------------- Barre de période -------------------------- */ .barre-periode { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px; /* Collante juste sous l'en-tête : la date consultée reste sous les yeux. --hauteur-entete est mesurée en JavaScript (l'en-tête change de hauteur selon la largeur d'écran et la langue). */ position: sticky; top: var(--hauteur-entete, 62px); z-index: 90; background: var(--fond); border-bottom: 1px solid var(--bordure); } .barre-periode[hidden] { display: none; } .groupe-modes { display: flex; border: 1px solid var(--bordure); border-radius: 6px; overflow: hidden; background: var(--carte); } .groupe-modes button { border: none; background: none; font: inherit; padding: 7px 14px; cursor: pointer; color: var(--texte-2); } .groupe-modes button + button { border-left: 1px solid var(--bordure); } .groupe-modes button.actif { background: var(--accent); color: #fff; font-weight: 600; } .nav-fleche { border: 1px solid var(--bordure); background: var(--carte); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; color: var(--accent-fonce); font-size: var(--txt-md); } .nav-fleche:hover { background: var(--survol); } .groupe-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .groupe-dates .libelle { color: var(--texte-2); } /* Bornes de la période affichées sous la barre (première et dernière date) */ .periode-detail { flex-basis: 100%; margin: -6px 0 0; color: var(--texte-2); font-size: var(--txt-sm); font-style: italic; } .periode-detail:empty { display: none; } /* ---------------------------- Champ date ---------------------------- */ .champ-date { position: relative; display: inline-flex; } .champ-date input { width: 105px; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: 6px 0 0 6px; font: inherit; color: var(--texte); } /* Focus : le bouton calendrier, collé au champ et peint après lui, recouvrait le côté droit de l'anneau natif du navigateur. L'anneau du champ (et celui du bouton) est donc désactivé au profit d'un anneau unique autour du GROUPE champ + bouton — le contrôle segmenté est bien une seule unité de saisie. */ .champ-date input:focus, .champ-date .btn-cal:focus { outline: none; } .champ-date:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 8px; } .champ-date input.erreur { border-color: var(--max); background: var(--erreur-fond); } .champ-date .btn-cal { border: 1px solid var(--bordure); border-left: none; background: var(--carte); border-radius: 0 6px 6px 0; cursor: pointer; padding: 0 8px; } .calendrier { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; background: var(--carte); border: 1px solid var(--bordure); border-radius: 8px; box-shadow: 0 6px 20px rgba(30, 40, 50, 0.18); padding: 10px; width: 250px; } .calendrier-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .calendrier-tete .mois-annee { font-weight: 600; } .calendrier-tete button { border: none; background: var(--fond-2); border-radius: 5px; width: 26px; height: 26px; cursor: pointer; color: var(--accent-fonce); } .calendrier-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .calendrier-grille .jour-sem { text-align: center; color: var(--texte-2); font-size: var(--txt-xs); padding: 3px 0; } .calendrier-grille button { border: none; background: none; border-radius: 5px; padding: 5px 0; cursor: pointer; font: inherit; color: var(--texte); } .calendrier-grille button:hover:not(:disabled) { background: var(--survol); } .calendrier-grille button:disabled { color: var(--desactive); cursor: default; } .calendrier-grille button.selectionne { background: var(--accent); color: #fff; font-weight: 600; } /* ------------------------------ Contenu ------------------------------ */ .contenu { padding: 6px 20px 30px; max-width: 1500px; margin: 0 auto; } .carte { background: var(--carte); border: 1px solid var(--bordure); border-radius: 10px; box-shadow: var(--ombre); padding: 16px; } .message-vide { text-align: center; color: var(--texte-2); padding: 40px; } /* --------------------------- Tableau de bord --------------------------- */ /* Bande de synthèse : répond d'un coup d'œil aux questions les plus fréquentes (quelle température, a-t-il plu, quel vent, quel soleil) avant le détail des tuiles, qui avaient toutes le même poids visuel. */ .bande-synthese { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; padding: 18px 22px; } .synthese-entete { font-size: var(--txt-sm); color: var(--texte-2); } .synthese-entete strong { color: var(--texte); font-weight: 600; } .synthese-corps { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .synthese-principal { display: flex; flex-direction: column; min-width: 190px; } .synthese-valeur { font-size: var(--txt-hero); font-weight: 300; line-height: 1; color: var(--texte); letter-spacing: -1px; } .synthese-valeur .unite { font-size: var(--txt-xl); font-weight: 400; color: var(--texte-2); margin-left: 4px; } .synthese-libelle { font-size: var(--txt-sm); color: var(--texte-2); margin-top: 8px; } .synthese-detail { font-size: var(--txt-sm); color: var(--texte-2); margin-top: 2px; } .synthese-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1; min-width: 260px; } .synthese-stat { background: var(--fond-2); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .synthese-stat .s-val { font-size: var(--txt-xl); font-weight: 600; color: var(--texte); } .synthese-stat .s-val small { font-size: var(--txt-sm); font-weight: 400; color: var(--texte-2); margin-left: 3px; } .synthese-stat .s-lib { font-size: var(--txt-sm); color: var(--texte-2); } .synthese-stat .s-sec { font-size: var(--txt-xs); color: var(--texte-2); opacity: 0.85; } /* Intertitres de famille : structurent les tuiles sans les alourdir. */ .groupe-titre { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: var(--txt-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--texte-2); } .groupe-titre::after { content: ""; flex: 1; height: 1px; background: var(--bordure); } .groupe-titre .compte { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.8; } .grille-jauges { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px; } .carte-jauge { text-align: center; } .carte-jauge h3 { margin: 0 0 6px; font-weight: 500; font-size: var(--txt-lg); color: var(--texte-2); } .carte-jauge .sous-titre { margin: -6px 0 4px; font-size: var(--txt-xs); color: var(--texte-2); font-style: italic; } /* Réorganisation des tuiles : bordure à la souris, appui long au doigt */ .carte-jauge.prise { cursor: move; box-shadow: 0 0 0 2px var(--accent), var(--ombre); } .carte-jauge.en-deplacement { opacity: 0.45; } .clone-deplacement { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; opacity: 0.9; box-shadow: 0 10px 28px rgba(30, 40, 50, 0.3); } /* Pendant un déplacement : pas de sélection de texte parasite */ body.deplacement-tuile, body.deplacement-tuile * { user-select: none; -webkit-user-select: none; } .bandeau-releve .astuce { font-size: var(--txt-sm); color: var(--texte-2); margin-left: 12px; } .carte-jauge .zone-svg svg { max-width: 190px; height: auto; } /* Thème des jauges SVG : les règles CSS priment sur les attributs de présentation SVG, ce qui permet au sombre de s'appliquer sans toucher au code des jauges. */ .zone-svg .jauge-valeur { fill: var(--texte); } .zone-svg .jauge-libelle { fill: var(--texte-2); } .zone-svg .jauge-fond { fill: var(--carte); } .bandeau-releve { color: var(--texte-2); margin: 0 0 12px; } .table-extremes { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: var(--txt-sm); } .table-extremes th, .table-extremes td { padding: 4px 6px; text-align: center; } .table-extremes .portee { background: var(--fond-2); border-radius: 4px; color: var(--texte-2); text-align: right; padding-right: 8px; white-space: nowrap; } /* Ligne « Période » (mode Personnalisé) mise en évidence */ .table-extremes .portee.periode { background: var(--periode-fond); color: var(--accent-fonce); font-weight: 600; } .chip { display: inline-block; border-radius: 10px; color: #fff; padding: 2px 12px; font-weight: 600; font-size: var(--txt-xs); } .chip-max { background: var(--max); } .chip-min { background: var(--min); } .chip-moy { background: #76828e; } .chip-total { background: var(--accent); } .chip-heures { background: #e8a53c; } .table-extremes td.val { font-weight: 600; color: var(--texte); } /* --------------------------- Tableau récap --------------------------- */ /* --------------------------------------------------------------------------- Tableaux de données — UN SEUL langage visuel, deux densités. Trois tableaux coexistaient avec deux traitements différents (14 px et en-tête transparent pour le récapitulatif, 12,5 px et en-tête coloré pour les autres). Ils partagent désormais taille, en-tête, filets et alignement ; seule la densité varie, selon qu'on lit un résumé ou qu'on parcourt des données. Tout nouveau tableau doit reprendre ce bloc. --------------------------------------------------------------------------- */ .table-resume, .table-brutes, .table-mensuel, .table-journal { width: 100%; font-size: var(--txt-sm); } .table-resume thead th, .table-brutes th, .table-mensuel thead th, .table-journal th { background: var(--fond-2); color: var(--texte-2); font-weight: 600; border-bottom: 2px solid var(--bordure); } /* Densité aérée : lecture d'un résumé (peu de lignes, on compare). */ .table-resume { border-collapse: collapse; } .table-resume th, .table-resume td { padding: var(--cellule-aeree); border-bottom: 1px solid var(--bordure-2); text-align: left; } .table-resume tbody tr:nth-child(odd) { background: var(--rayure); } .table-resume td.nombre { font-weight: 600; white-space: nowrap; } .table-resume td .unite, .valeur-actuelle .unite { color: var(--texte-2); font-weight: 400; font-size: 0.85em; } .titre-periode { color: var(--texte-2); font-weight: 400; margin: 4px 0 14px; } h2.titre-onglet { font-size: var(--txt-xl); font-weight: 600; margin: 10px 0 2px; } /* ----------------------------- Graphiques ----------------------------- */ .liste-graphes { display: flex; flex-direction: column; gap: 16px; } .graphe-entete { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .graphe-entete h3 { margin: 0; font-size: var(--txt-md); font-weight: 500; color: var(--texte); } .puces { display: flex; gap: 6px; flex-wrap: wrap; } .puce { border-radius: 10px; padding: 2px 10px; font-size: var(--txt-xs); color: #fff; } .graphe-corps { position: relative; height: 260px; margin-top: 8px; } /* ---------------------------- Données brutes ---------------------------- */ .barre-outils { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .barre-outils .aide { color: var(--texte-2); font-size: var(--txt-sm); } /* Fin séparateur vertical entre les compteurs et les boutons d'export. */ .separateur-outils { width: 1px; align-self: stretch; background: var(--bordure); } .enveloppe-table { overflow-x: auto; border: 1px solid var(--bordure); border-radius: 8px; } /* Densité compacte : parcours de données chiffrées. */ .table-brutes { border-collapse: collapse; white-space: nowrap; } .table-brutes th, .table-brutes td { padding: var(--cellule-compacte); border-bottom: 1px solid var(--bordure-2); text-align: right; } .table-brutes th { position: sticky; top: 0; cursor: pointer; user-select: none; text-align: right; } .table-brutes th:first-child, .table-brutes td:first-child, .table-brutes th:nth-child(2), .table-brutes td:nth-child(2) { text-align: left; } .table-brutes tr.ligne-filtres th { padding: 3px; } .table-brutes tr.ligne-filtres input { width: 100%; min-width: 62px; border: 1px solid var(--bordure); border-radius: 4px; padding: 3px 5px; font-size: var(--txt-xs); } .table-brutes tbody tr:hover { background: var(--survol); } .pagination { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .pagination button { border: 1px solid var(--bordure); background: var(--carte); border-radius: 6px; padding: 5px 12px; cursor: pointer; font: inherit; color: var(--accent-fonce); } .pagination button:disabled { color: #c0c6cc; cursor: default; } .menu-colonnes { position: relative; } .menu-colonnes > summary { list-style: none; cursor: pointer; border: 1px solid var(--bordure); background: var(--carte); border-radius: 6px; padding: 6px 12px; } .menu-colonnes > div { position: absolute; z-index: 40; background: var(--carte); border: 1px solid var(--bordure); border-radius: 8px; box-shadow: 0 6px 20px rgba(30,40,50,.18); padding: 10px; max-height: 300px; overflow-y: auto; min-width: 230px; } .menu-colonnes label { display: block; padding: 2px 0; cursor: pointer; } /* --------------------------- Bilan mensuel --------------------------- */ /* La carte épouse la largeur de son tableau au lieu de s'étirer sur toute la page : un cadre bien plus large que son contenu donne une impression de vide. Au-delà de la place disponible, elle se borne et l'enveloppe prend le relais en défilement horizontal. */ /* Le tableau compte 15 colonnes de largeur modeste : étiré sur un écran large, son cadre paraissait démesuré (1225 px pour 800 px de contenu). On borne donc la carte à une largeur de lecture confortable, commune aux quatre tableaux pour que leurs bords s'alignent. En deçà, elle occupe toute la place offerte. */ .carte-mensuel { margin-bottom: 16px; padding-bottom: 10px; max-width: 960px; } .carte-mensuel h3 { margin: 0 0 12px; font-size: var(--txt-lg); font-weight: 600; } .carte-mensuel .unite-titre { color: var(--texte-2); font-weight: 400; font-size: var(--txt-sm); } /* Le conteneur porte le défilement horizontal ; les deux premières colonnes restent figées grâce à position:sticky. */ .enveloppe-mensuel { overflow-x: auto; } /* Ombres de défilement : sur écran étroit, l'essentiel du tableau est masqué (à 375 px, 2 mois sur 13 sont visibles). Rien, sinon, ne signale qu'il continue — les barres de défilement tactiles n'apparaissent que pendant le geste. Un voile dégradé apparaît donc du côté où du contenu reste caché, et s'efface une fois ce bord atteint. Les classes sont posées par mensuel.js selon la position de défilement. Le cadre (non défilant) porte le voile ; l'enveloppe (défilante) porte le tableau. Un dégradé purement CSS ne suffirait pas : les cellules ont un fond opaque qui le masquerait. */ .cadre-mensuel { position: relative; } .cadre-mensuel::before, .cadre-mensuel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; } .cadre-mensuel::before { left: 0; background: linear-gradient(to right, var(--voile-defilement), transparent); } .cadre-mensuel::after { right: 0; background: linear-gradient(to left, var(--voile-defilement), transparent); } .cadre-mensuel.defile-avant::before { opacity: 1; } .cadre-mensuel.defile-apres::after { opacity: 1; } /* Le tableau remplit la carte : les quatre affichent ainsi la même largeur. Sous la largeur plancher des colonnes, l'enveloppe reprend le défilement. */ .table-mensuel { border-collapse: separate; border-spacing: 0; white-space: nowrap; width: 100%; } .table-mensuel th, .table-mensuel td { padding: var(--cellule-compacte); text-align: right; } .table-mensuel thead th { text-align: center; } /* Largeur plancher commune aux colonnes de valeurs : les quatre tableaux s'alignent ainsi sur la même largeur, malgré des nombres de longueurs différentes (« 12,4 » contre « 1024 »). */ .table-mensuel th:not(.fige), .table-mensuel td:not(.fige) { min-width: 54px; } .table-mensuel tbody td { border-bottom: 1px solid var(--bordure-2); } .table-mensuel tr.debut-annee th, .table-mensuel tr.debut-annee td { border-top: 2px solid var(--bordure); } /* Colonnes figées : fond opaque obligatoire pour masquer ce qui défile dessous. La largeur de la 1re colonne est une variable : le décalage gauche de la 2e doit lui être égal, sinon elles se chevauchent. Une seule valeur à régler. */ .table-mensuel { --fige-a-largeur: 92px; } .table-mensuel .fige { position: sticky; background: var(--carte); z-index: 2; } .table-mensuel .fige-a { left: 0; min-width: var(--fige-a-largeur); text-align: left; font-weight: 600; color: var(--texte); } .table-mensuel .fige-b { left: var(--fige-a-largeur); min-width: 74px; text-align: left; font-weight: 500; color: var(--texte-2); border-right: 2px solid var(--bordure); } .table-mensuel thead .fige { background: var(--fond-2); z-index: 3; } .table-mensuel .fige-a small { display: block; font-size: var(--txt-xs); font-weight: 400; color: var(--texte-2); } .table-mensuel .fige-b small { display: block; font-size: var(--txt-xs); font-weight: 400; opacity: 0.8; } /* Colonne annuelle : séparée visuellement des mois */ .table-mensuel .col-annuelle { border-left: 2px solid var(--bordure); font-weight: 600; background: var(--rayure); } /* Extrêmes de chaque ligne : mois le plus élevé en rouge, le plus bas en bleu */ .table-mensuel .cellule-max { background: var(--extreme-max-fond); color: var(--extreme-max-texte); font-weight: 700; } .table-mensuel .cellule-min { background: var(--extreme-min-fond); color: var(--extreme-min-texte); font-weight: 700; } .table-mensuel .vide { color: var(--desactive); } /* Année : forme longue par défaut, abrégée sur écran étroit (voir plus bas). */ .table-mensuel .an-court { display: none; } /* Sur écran étroit, les colonnes figées mangeaient la moitié de la zone visible (166 px sur 321 à 375 px, soit 2 mois affichés sur 13). On les resserre et on abrège l'année (« 2026 » → « 26 ») : ~3 mois deviennent visibles d'un coup. */ @media (max-width: 700px) { .table-mensuel { --fige-a-largeur: 52px; } .table-mensuel .fige-b { min-width: 62px; } .table-mensuel .an-plein { display: none; } .table-mensuel .an-court { display: inline; } } /* ----------------------------- Paramètres ----------------------------- */ .grille-parametres { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; } /* Empile plusieurs cartes dans une même cellule de la grille. Les lignes d'une grille CSS s'alignent sur la carte la plus haute : sans cette pile, une carte courte (« Langue ») laisserait un vide sous elle jusqu'à la ligne suivante. */ .pile-cartes { display: grid; gap: 16px; align-content: start; } .carte h3 { margin: 0 0 10px; font-size: var(--txt-lg); font-weight: 600; } .carte .aide { color: var(--texte-2); font-size: var(--txt-sm); margin: 0 0 12px; } .champ { margin-bottom: 12px; } .champ label { display: block; color: var(--texte-2); margin-bottom: 4px; } .champ input[type="text"], .champ input[type="number"], .champ input[type="datetime-local"], .champ select { width: 100%; padding: 7px 9px; border: 1px solid var(--bordure); border-radius: 6px; font: inherit; } .champ-ligne { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } /* Deux champs côte à côte (plage début / fin de la maintenance). */ .champ-double { display: flex; gap: 12px; flex-wrap: wrap; } .champ-double .champ { flex: 1; min-width: 180px; } .champ-fichier { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fichiers-choisis { color: var(--texte-2); font-size: var(--txt-sm); } .champ-avec-bouton { display: flex; gap: 8px; } .champ-avec-bouton input { flex: 1; min-width: 0; } .champ-avec-bouton .bouton { white-space: nowrap; } /* Capteurs supplémentaires (noms datés) */ .grille-canaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .canal { border: 1px solid var(--bordure); border-radius: 8px; padding: 12px; } .canal h4 { margin: 0 0 10px; font-size: var(--txt-md); font-weight: 600; } .champ-canal { display: flex; flex-wrap: wrap; gap: 8px; } .champ-canal .canal-nom { flex: 1 1 130px; min-width: 0; } .champ-canal .canal-depuis { flex: 0 0 auto; } .canal-histoire { list-style: none; margin: 10px 0 0; padding: 0; font-size: var(--txt-sm); } .canal-histoire li { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-top: 1px solid var(--bordure-2); } .canal-histoire li span:first-child { flex: 1; } .canal-suppr { border: none; background: none; color: var(--texte-2); cursor: pointer; font-size: var(--txt-md); line-height: 1; padding: 2px 6px; border-radius: 4px; } .canal-suppr:hover { background: var(--erreur-fond); color: var(--max); } /* --------- Explorateur de dossiers du serveur (fenêtre modale) --------- */ .voile-modal { position: fixed; inset: 0; background: rgba(30, 40, 50, 0.45); z-index: 300; display: flex; align-items: center; justify-content: center; } .modal-dossiers { background: var(--carte); border-radius: 10px; width: min(480px, 92vw); max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); } .modal-tete { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bordure); word-break: break-all; } .modal-liste { overflow-y: auto; padding: 8px; flex: 1; min-height: 220px; } .element-dossier { display: block; width: 100%; text-align: left; border: none; background: none; padding: 7px 10px; border-radius: 6px; cursor: pointer; font: inherit; color: var(--texte); } .element-dossier:hover { background: var(--survol); } .modal-pied { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--bordure); } /* ------------------------- Fenêtre d'aide ------------------------- */ .modal-aide { background: var(--carte); border-radius: 10px; width: min(680px, 94vw); max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); } /* Écran d'accueil quand la consultation est réservée aux utilisateurs connectés : l'application n'a alors ni onglets ni données à montrer. */ .portail { max-width: 460px; margin: 12vh auto 0; text-align: center; padding: 0 16px; } .portail-logo { font-size: 56px; line-height: 1; display: block; } .portail h2 { margin: 12px 0 6px; } .portail p { color: var(--texte-2); margin: 0 0 20px; } /* L'onboarding partage l'ossature du portail. La saisie (mot de passe, code, codes de secours) se lit mieux alignée à gauche et un peu plus large. */ .portail .champ, .portail .message-erreur { text-align: left; } .portail-large { max-width: 620px; } .portail-large #tf-zone { text-align: left; } /* Secret TOTP et codes de secours : chasse fixe, car ils se recopient à la main et l'on doit distinguer sans hésiter 0 de O, 1 de l. */ .codes-secours { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--txt-sm); background: var(--survol); border-radius: 6px; padding: 10px 12px; margin: 8px 0; white-space: pre-wrap; word-break: break-all; user-select: all; } .uri-otpauth { font-size: calc(var(--txt-sm) * 0.9); } /* Actions de la table des comptes : les deux boutons restent sur une ligne. */ .actions-compte { display: flex; gap: 6px; flex-wrap: wrap; } /* Statistiques d'utilisation. Barres empilées en CSS pur (pas de bibliothèque de graphiques) : le volume est petit et les données déjà agrégées. */ /* Bascule de portée des statistiques (30 jours / depuis la réinitialisation) : contrôle segmenté à la largeur de son contenu. */ .stats-portees { margin: 8px 0 12px; } .stats-portees .groupe-modes { display: inline-flex; } .stats-resume { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px; } .stats-puce { font-size: var(--txt-sm); padding: 2px 8px; border-radius: 10px; } .stats-ano-p { background: color-mix(in srgb, var(--accent, #3d89ad) 22%, transparent); } .stats-con-p { background: color-mix(in srgb, var(--accent, #3d89ad) 55%, transparent); } .stats-jours { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin: 4px 0 14px; } .stats-barre { flex: 1; min-width: 4px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .stats-seg { display: block; width: 100%; } .stats-con { background: var(--accent, #3d89ad); border-radius: 2px 2px 0 0; } .stats-ano { background: color-mix(in srgb, var(--accent, #3d89ad) 40%, transparent); } /* Colonne « part » : une petite jauge derrière le pourcentage. */ .stats-pct { position: relative; min-width: 90px; } .stats-pct span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 60%; background: color-mix(in srgb, var(--accent, #3d89ad) 22%, transparent); border-radius: 3px; z-index: 0; } /* Fenêtres de compte (connexion, mot de passe, première installation). */ .modal-compte { background: var(--carte); border-radius: 10px; width: min(400px, 92vw); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); } .modal-compte .modal-corps { padding: 16px 20px 20px; } .modal-compte h4 { margin: 18px 0 10px; font-size: var(--txt-base); } .modal-compte .bouton { margin-top: 6px; } .message-erreur { color: var(--erreur, #c62828); font-size: var(--txt-sm); margin: 4px 0 10px; } /* Fenêtre « À propos » : même ossature que l'aide, en plus étroit — son contenu tient en quelques lignes. */ .modal-apropos { background: var(--carte); border-radius: 10px; width: min(460px, 92vw); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); } .modal-apropos .apropos-corps { padding: 18px 20px 22px; } .aide-sujets { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--bordure); } .aide-sujets button { border: 1px solid var(--bordure); background: var(--fond-2); color: var(--texte-2); border-radius: 14px; padding: 4px 12px; font: inherit; font-size: var(--txt-sm); cursor: pointer; } .aide-sujets button.actif { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .aide-contenu { padding: 4px 20px 18px; overflow-y: auto; line-height: 1.55; } .aide-contenu h4 { margin: 16px 0 6px; color: var(--accent-fonce); font-size: var(--txt-md); } .aide-contenu p { margin: 10px 0; } .aide-contenu ul { margin: 6px 0; padding-left: 20px; } .aide-contenu li { margin: 4px 0; } .aide-contenu code { background: var(--fond-2); padding: 1px 6px; border-radius: 4px; font-size: var(--txt-sm); } .bouton { border: none; background: var(--accent); color: #fff; font: inherit; font-weight: 600; border-radius: 6px; padding: 8px 18px; cursor: pointer; } .bouton:hover { background: var(--accent-fonce); } .bouton.secondaire { background: var(--fond-2); color: var(--accent-fonce); border: 1px solid var(--bordure); } .bouton:disabled { opacity: 0.5; cursor: default; } .confirmation { color: #2e8540; font-weight: 600; margin-left: 10px; } .table-journal { border-collapse: collapse; } .table-journal th, .table-journal td { padding: var(--cellule-compacte); border-bottom: 1px solid var(--bordure-2); text-align: left; } .liste-bilans { margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--txt-sm); } .liste-bilans li { padding: 3px 0; } .def-etat { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; } .def-etat dt { color: var(--texte-2); } .def-etat dd { margin: 0; font-weight: 600; } /* Carte « À propos » */ .apropos-corps { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .apropos-logo { font-size: 44px; line-height: 1; } .apropos-corps p { margin: 2px 0; color: var(--texte-2); } .apropos-nom { font-size: var(--txt-lg); font-weight: 600; color: var(--texte) !important; } .apropos-version { display: inline-block; margin-left: 8px; font-size: var(--txt-sm); font-weight: 600; color: var(--accent-fonce); background: var(--periode-fond); border-radius: 10px; padding: 1px 10px; vertical-align: middle; } .apropos-dev { font-size: var(--txt-sm); } .apropos-annee { font-size: var(--txt-sm); margin-top: 6px !important; opacity: 0.85; } /* --------------------- Adaptation aux petits écrans --------------------- Trois paliers, car l'en-tête étant COLLANT, sa hauteur est désormais occupée en permanence : la laisser passer à la ligne coûterait cher. Les 6 onglets réclament ~718 px, auxquels s'ajoutent logo, titre et boutons d'action. • ≥ 1150 px : tout est affiché ; • 900–1149 px : onglets conservés, titre masqué et actions en icônes ; • < 900 px : menu déroulant à la place des onglets et du titre. ------------------------------------------------------------------- */ /* Palier intermédiaire : on libère la largeur prise par le titre et les libellés des boutons pour que les onglets tiennent sur une seule ligne. */ @media (max-width: 1149px) { .entete-titre h1 { display: none; } .bouton-entete { font-size: 0; padding: 9px 11px; } .bouton-entete::first-letter { font-size: 16px; } .zone-apparence summary { font-size: 0; padding: 9px 11px; } .zone-apparence summary::first-letter { font-size: 16px; } } /* Palier compact : le menu déroulant remplace onglets ET titre. */ @media (max-width: 899px) { .entete { gap: 10px; padding: 8px 10px; flex-wrap: nowrap; } .entete-titre { padding: 0; } .onglets { display: none; } .onglets-mobile { display: block; min-height: 44px; } .logo { font-size: 22px; } .zone-actions { gap: 4px; } } /* Palier tactile : ergonomie du doigt et densité d'affichage. */ @media (max-width: 700px) { .contenu { padding: 6px 10px 20px; } /* Barre de période resserrée, et cibles portées à 44 px (norme tactile) : les flèches de navigation, les plus sollicitées, étaient les plus petites de l'interface (32 px). */ .barre-periode { padding: 8px 10px; gap: 8px; } .groupe-modes { width: 100%; } .groupe-modes button { flex: 1; min-height: 44px; padding: 7px 6px; } .nav-fleche { width: 44px; height: 44px; font-size: 18px; } .champ-date .btn-cal { min-width: 44px; min-height: 44px; } .periode-detail { margin: 0; } /* Les champs de saisie restent à 16 px : en dessous de ce seuil, iOS zoome automatiquement à la prise de focus, ce qui décale toute la mise en page. C'est la seule taille littérale volontaire de l'interface. */ .champ-date input, .onglets-mobile { min-height: 44px; font-size: 16px; } .champ-date input { width: 118px; } /* Bande de synthèse compactée : elle tient dans le premier écran. Les tailles suivent l'échelle, qui a déjà baissé d'un cran ci-dessus. */ .bande-synthese { gap: 10px; padding: 14px; } .synthese-corps { gap: 16px; } .synthese-stats { gap: 6px; } .synthese-stat { padding: 8px; } .groupe-titre { margin: 16px 0 8px; } /* Deux colonnes de tuiles : l'affichage sur une colonne imposait 9 écrans de défilement pour 16 tuiles, dont une seule visible d'emblée. */ .grille-jauges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .carte-jauge { padding: 10px 6px; } .carte-jauge .zone-svg svg { max-width: 128px; } .table-extremes th, .table-extremes td { padding: 3px 2px; } .chip { padding: 2px 6px; } .bandeau-releve .astuce { display: none; } /* Fenêtres modales : plein écran, plus confortable au doigt. */ .modal-aide, .modal-dossiers, .modal-apropos, .modal-compte { width: 100%; max-height: 92vh; } }