@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap'); /* ════════════════════════════════════════════════════════════ VARIABLES GLOBALES Toutes les couleurs et valeurs réutilisables sont ici. Si tu veux changer une couleur, tu n'as qu'un seul endroit à modifier ! ════════════════════════════════════════════════════════════ */ :root { --bg: #0e0f13; /* fond principal (noir bleuté) */ --surface: #16181f; /* fond des cartes et panneaux */ --border: #2a2d38; /* couleur des bordures */ --text: #e8eaf0; /* texte principal */ --muted: #5a5e72; /* texte secondaire / labels */ --accent: #f0c040; /* jaune doré — couleur d'accent principale */ /* Couleurs des états de turbine (planning) */ --c-service: #4ade80; /* vert — en service */ --c-l2: #fb923c; /* orange — révision L2 */ --c-l3: #f87171; /* rouge — révision L3 (majeure) */ --c-magasin: #475569; /* gris bleu — au magasin */ --radius: 4px; /* arrondi standard des éléments */ } /* ════════════════════════════════════════════════════════════ THÈME CLAIR Le thème SOMBRE est celui défini dans :root ci-dessus (par défaut). Ici on ne RÉ-ÉCRIT que les variables qui doivent changer en clair. Le script theme.js ajoute l'attribut data-theme="light" sur la balise pour activer ces couleurs. Tout le reste de la feuille de style continue d'utiliser var(--...) sans modification. ════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { --bg: #f4f5f7; /* fond principal (gris très clair) */ --surface: #ffffff; /* fond des cartes et panneaux (blanc) */ --border: #d7dae2; /* bordures (gris clair) */ --text: #1c1e26; /* texte principal (presque noir) */ --muted: #6b7080; /* texte secondaire / labels */ --accent: #b07d00; /* doré assombri pour rester lisible sur fond clair */ /* États de turbine : versions assombries pour contraster sur blanc */ --c-service: #16a34a; /* vert */ --c-l2: #ea7317; /* orange */ --c-l3: #dc2626; /* rouge */ --c-magasin: #64748b; /* gris bleu */ } /* Quelques couleurs « en dur » dans la feuille doivent aussi être adaptées au thème clair (elles n'utilisaient pas de variable). */ :root[data-theme="light"] #tooltip { background: #ffffff; box-shadow: 0 8px 32px rgba(0,0,0,0.18); } :root[data-theme="light"] .text-green { color: #16a34a; } :root[data-theme="light"] .text-orange { color: #ea7317; } :root[data-theme="light"] .text-red { color: #dc2626; } :root[data-theme="light"] .seg-service, :root[data-theme="light"] .seg-magasin { color: #16a34a; } /* ════════════════════════════════════════════════════════════ BOUTON DE BASCULE DE THÈME Injecté automatiquement par theme.js à la fin de la barre .nav. Il reprend le style des liens de navigation pour rester cohérent. ════════════════════════════════════════════════════════════ */ .theme-toggle { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; margin-left: auto; /* pousse le bouton à droite de la barre de nav */ } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* ── Reset minimal ─────────────────────────────────────── */ /* Évite les marges/paddings par défaut du navigateur */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Corps de page ─────────────────────────────────────── */ body { background: var(--bg); color: var(--text); font-family: 'DM Mono', monospace; /* police à chasse fixe = style technique */ min-height: 100vh; padding: 40px 32px; } /* ════════════════════════════════════════════════════════════ TYPOGRAPHIE ════════════════════════════════════════════════════════════ */ h1 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 4px; } /* Sous-titre sous le h1 */ .subtitle { font-size: 0.75rem; color: var(--muted); margin-bottom: 24px; letter-spacing: 0.08em; text-transform: uppercase; } /* ════════════════════════════════════════════════════════════ NAVIGATION Barre de navigation en haut de chaque page. Les 3 liens : Planning turbines / Vue TG / RCM II ════════════════════════════════════════════════════════════ */ .nav { display: flex; gap: 16px; margin-bottom: 40px; flex-wrap: wrap; /* passe à la ligne sur petit écran */ } .nav a { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 8px 18px; border-radius: var(--radius); border: 1px solid var(--border); color: var(--muted); transition: all 0.15s; } /* Survol : bordure et texte jaune */ .nav a:hover { border-color: var(--accent); color: var(--accent); } /* Lien actif (page courante) : fond jaune, texte noir */ .nav a.active { background: var(--accent); color: #000; border-color: var(--accent); } /* ════════════════════════════════════════════════════════════ FORMULAIRE TAUX D'UTILISATION Présent sur index.html et tg.html ════════════════════════════════════════════════════════════ */ .taux-form { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; } .taux-form label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .taux-form input[type=number] { width: 80px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: 'DM Mono', monospace; font-size: 0.85rem; padding: 6px 10px; transition: border-color 0.15s; } .taux-form input[type=number]:focus { outline: none; border-color: var(--accent); } .taux-form button { background: var(--accent); color: #000; border: none; border-radius: var(--radius); padding: 6px 16px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.75rem; cursor: pointer; letter-spacing: 0.06em; transition: opacity 0.15s; } .taux-form button:hover { opacity: 0.85; } /* ════════════════════════════════════════════════════════════ LÉGENDE (partagée par toutes les pages) ════════════════════════════════════════════════════════════ */ .legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; } /* Petit carré de couleur devant chaque item de légende */ .legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ TIMELINE — Conteneur et axe ════════════════════════════════════════════════════════════ */ /* Wrapper avec scroll horizontal si la timeline déborde */ .timeline-wrapper { overflow-x: auto; padding-bottom: 12px; } /* La timeline elle-même a une largeur minimale pour rester lisible */ .timeline-chart { min-width: 900px; position: relative; } /* ── Axe des temps (années) ── */ .time-axis { display: flex; margin-bottom: 8px; position: relative; height: 24px; } /* Chaque tick (marque année) */ .tick { position: absolute; transform: translateX(-50%); /* centré sur sa position */ font-size: 0.62rem; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; } /* Petit trait vertical sous le tick */ .tick::after { content: ''; position: absolute; bottom: -6px; left: 50%; width: 1px; height: 5px; background: var(--border); } /* ── Lignes de grille verticales ── */ .grid-lines { position: absolute; top: 0; right: 0; bottom: 0; pointer-events: none; /* les lignes ne captent pas les clics */ } .grid-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: 0.5; } /* ── Ligne "Aujourd'hui" (trait jaune vertical) ── */ .now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0.8; pointer-events: none; z-index: 5; } /* Label "auj." au-dessus de la ligne now */ .now-label { position: absolute; top: -20px; transform: translateX(-50%); font-size: 0.6rem; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } /* ════════════════════════════════════════════════════════════ ROWS (lignes de la timeline) ════════════════════════════════════════════════════════════ */ .row { display: flex; align-items: center; margin-bottom: 8px; position: relative; } /* Label à gauche de la piste */ .row-label { flex-shrink: 0; padding-right: 16px; text-align: right; } /* ── Piste horizontale ── */ .row-track { flex: 1; height: 34px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); position: relative; overflow: visible; } /* ── Segments (blocs colorés sur la piste) ── */ .segment { position: absolute; top: 2px; height: calc(100% - 4px); /* petit espace haut/bas pour l'esthétique */ border-radius: 3px; cursor: pointer; transition: filter 0.15s; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; white-space: nowrap; z-index: 2; } .segment:hover { filter: brightness(1.3); /* plus lumineux au survol */ z-index: 10; } /* Classes de couleur pour les segments */ .seg-service { background: rgba(74, 222, 128, 0.18); color: #4ade80; } .seg-magasin { background: rgba(74, 222, 128, 0.18); color: #4ade80; } .seg-l2 { background: var(--c-l2); color: rgba(0,0,0,0.85); } .seg-l3 { background: var(--c-l3); color: rgba(0,0,0,0.85); } /* ════════════════════════════════════════════════════════════ TOOLTIP (info-bulle au survol des segments) ════════════════════════════════════════════════════════════ */ #tooltip { position: fixed; /* fixe = reste visible même si on scrolle */ background: #1e2130; border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; font-size: 0.72rem; color: var(--text); pointer-events: none; /* le tooltip ne bloque pas les clics */ opacity: 0; transition: opacity 0.15s; z-index: 100; line-height: 1.8; box-shadow: 0 8px 32px rgba(0,0,0,0.5); max-width: 280px; } #tooltip.visible { opacity: 1; } /* Titre du tooltip (nom de l'équipement) */ #tooltip .tt-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; } /* Lignes de détail dans le tooltip */ #tooltip .tt-muted { color: var(--muted); } /* ════════════════════════════════════════════════════════════ EN-TÊTES DE GROUPE (page index) ex: "LM2500+" et "LM2500+ G4" ════════════════════════════════════════════════════════════ */ .group-header { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; margin: 24px 0 8px 0; padding-left: 8px; border-left: 3px solid var(--accent); /* barre jaune verticale */ } /* ════════════════════════════════════════════════════════════ LABELS DES TURBINES (page index) ════════════════════════════════════════════════════════════ */ .row-label .serial { font-size: 0.72rem; color: var(--text); font-family: 'Syne', sans-serif; font-weight: 600; } .row-label .location { font-size: 0.62rem; color: var(--muted); margin-top: 2px; } .row-label .heures { font-size: 0.6rem; color: var(--muted); } /* ════════════════════════════════════════════════════════════ LABELS TG (page tg.html) ════════════════════════════════════════════════════════════ */ .row-label .tag { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--text); } /* ════════════════════════════════════════════════════════════ STOCK MAGASIN (page tg.html) ════════════════════════════════════════════════════════════ */ .stock-row { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; } .stock-label { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; text-align: right; padding-right: 16px; flex-shrink: 0; } .stock-track { flex: 1; height: 36px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); position: relative; overflow: hidden; } .stock-segment { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; font-family: 'Syne', sans-serif; border-right: 1px solid rgba(255,255,255,0.1); } /* ════════════════════════════════════════════════════════════ SECTION MISE À JOUR HEURES (page index) ════════════════════════════════════════════════════════════ */ .update-section { margin-top: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px; max-width: 480px; } /* La section "Gérer la flotte" est plus large car elle contient un tableau */ .update-section.fleet-section { max-width: 900px; } .update-section h2 { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; margin-bottom: 16px; } .update-section select, .update-section input[type=number] { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: 'DM Mono', monospace; font-size: 0.82rem; padding: 8px 12px; margin-bottom: 12px; transition: border-color 0.15s; } .update-section select:focus, .update-section input[type=number]:focus { outline: none; border-color: var(--accent); } /* On exclut les .btn-danger pour qu'ils gardent leur propre style */ .update-section button:not(.btn-danger) { background: var(--accent); color: #000; border: none; border-radius: var(--radius); padding: 8px 20px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.8rem; cursor: pointer; letter-spacing: 0.06em; transition: opacity 0.15s; } .update-section button:not(.btn-danger):hover { opacity: 0.85; } /* ════════════════════════════════════════════════════════════ CARTES DE STATISTIQUES (partagées par toutes les pages) ════════════════════════════════════════════════════════════ */ .stats { margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px 20px; min-width: 140px; transition: border-color 0.15s; } .stat-card:hover { border-color: var(--muted); } .stat-label { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .stat-value { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 700; } .stat-sub { font-size: 0.62rem; color: var(--muted); margin-top: 2px; } /* ════════════════════════════════════════════════════════════ UTILITAIRES GLOBAUX Petites classes réutilisables n'importe où ════════════════════════════════════════════════════════════ */ /* Texte tronqué avec "..." si trop long */ .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Flexbox rapide */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } /* Espacements */ .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } /* Couleurs de texte rapides */ .text-muted { color: var(--muted); } .text-accent { color: var(--accent); } .text-green { color: #4ade80; } .text-orange { color: #fb923c; } .text-red { color: #f87171; } /* ════════════════════════════════════════════════════════════ RESPONSIVITÉ Ajustements pour les petits écrans (tablettes, mobiles) ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body { padding: 20px 16px; } h1 { font-size: 1.2rem; } /* La nav passe à la ligne et les liens se compactent */ .nav { gap: 8px; } .nav a { padding: 6px 12px; font-size: 0.68rem; } /* Les stats s'empilent */ .stats { gap: 10px; } .stat-card { min-width: 110px; padding: 10px 14px; } .stat-value { font-size: 1.1rem; } } /* ════════════════════════════════════════════════════════════ PANNEAUX GÉNÉRIQUES Utilisés par weibull.html et weibull_thermique.html ════════════════════════════════════════════════════════════ */ /* Bloc avec fond sombre, bordure et coins arrondis */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px; } /* Titre en haut d'un panneau, avec séparateur jaune */ .panel-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } /* ════════════════════════════════════════════════════════════ PLACEHOLDER (état vide avant calcul) Affiché quand il n'y a pas encore de résultats ════════════════════════════════════════════════════════════ */ .placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--muted); text-align: center; gap: 12px; border: 1px dashed var(--border); border-radius: 8px; } /* Grand emoji/icône en haut du placeholder */ .placeholder-icon { font-size: 2.5rem; opacity: 0.4; } /* Texte explicatif sous l'icône */ .placeholder-text { font-size: 0.75rem; line-height: 1.6; } /* ════════════════════════════════════════════════════════════ BANDEAU D'ERREUR Affiché quand un calcul échoue ════════════════════════════════════════════════════════════ */ .error-banner { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); border-left: 3px solid var(--c-l3); /* trait rouge à gauche */ border-radius: 4px; padding: 12px 16px; color: var(--c-l3); font-size: 0.78rem; } /* ════════════════════════════════════════════════════════════ GRILLE DE PARAMÈTRES ET CARTES DE RÉSULTATS Partagées par les pages Weibull ════════════════════════════════════════════════════════════ */ /* Grille auto-ajustable : les cartes s'adaptent à la largeur */ .params-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; } /* Carte individuelle d'un paramètre */ .param-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 16px; text-align: center; transition: border-color 0.2s; } .param-card:hover { border-color: var(--accent); } .param-card.highlight { border-color: var(--accent); } /* surligné en jaune */ .param-card.danger { border-color: var(--c-l3); } /* surligné en rouge */ /* Grand symbole (β, η…) en haut de la carte */ .param-symbol { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--accent); margin-bottom: 4px; } /* Valeur numérique calculée */ .param-value { font-family: 'DM Mono', monospace; font-size: 1.1rem; font-weight: 500; color: var(--text); } /* Libellé sous la valeur */ .param-label { font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 4px; } /* ════════════════════════════════════════════════════════════ GRAPHIQUES (Chart.js) Partagés par les pages Weibull ════════════════════════════════════════════════════════════ */ /* Zone contenant tous les graphiques */ .results-zone { display: flex; flex-direction: column; gap: 24px; } /* Grille 2 colonnes pour les graphiques */ .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Carte contenant un graphique */ .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; } /* Occupe toute la largeur (dépasse la grille 2 colonnes) */ .chart-card.full-width { grid-column: 1 / -1; } /* Titre au-dessus du graphique */ .chart-title { font-family: 'Syne', sans-serif; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px; } /* Valeur mise en avant dans le titre */ .chart-title span { color: var(--accent); margin-left: 6px; } /* Force les canvas Chart.js à occuper toute la largeur */ canvas { width: 100% !important; } /* Variante ronde du legend-dot, utilisée dans weibull_thermique.html */ .legend-dot-round { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } /* ════════════════════════════════════════════════════════════ BOUTONS GÉNÉRIQUES Partagés par bcr.html et rcm.html ════════════════════════════════════════════════════════════ */ /* Bouton principal : fond jaune, texte noir */ .btn-primary { background: var(--accent); color: #000; border: none; border-radius: 4px; padding: 8px 20px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.78rem; cursor: pointer; letter-spacing: 0.06em; transition: opacity 0.15s; } .btn-primary:hover { opacity: 0.85; } /* Bouton secondaire : fond sombre, bordure visible */ .btn-secondary { background: var(--surface); color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 8px 20px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.78rem; cursor: pointer; text-decoration: none; /* utile si utilisé sur un */ transition: border-color 0.15s; } .btn-secondary:hover { border-color: var(--muted); color: var(--text); } /* Bouton danger : rouge discret pour les actions destructives (suppression) */ .btn-danger { background: transparent; color: var(--c-l3); /* rouge cohérent avec les couleurs L3 */ border: 1px solid var(--c-l3); border-radius: 4px; padding: 4px 12px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.72rem; cursor: pointer; letter-spacing: 0.05em; transition: background 0.15s, color 0.15s; } .btn-danger:hover { background: var(--c-l3); color: #000; } /* Tableau de gestion de flotte dans index.html */ .fleet-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 12px; } .fleet-table th { text-align: left; padding: 6px 10px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; white-space: nowrap; } .fleet-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .fleet-table tr:last-child td { border-bottom: none; } /* Colonne du bouton supprimer : largeur fixe, pas de retour à la ligne */ .fleet-table td:last-child, .fleet-table th:last-child { text-align: right; white-space: nowrap; width: 110px; /* largeur suffisante pour le bouton "Supprimer" */ padding-right: 4px; } .fleet-table .serial-cell { font-weight: 700; color: var(--accent); font-size: 0.82rem; white-space: nowrap; } .fleet-table .type-badge { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 2px 7px; font-size: 0.68rem; color: var(--muted); white-space: nowrap; display: inline-block; } /* ════════════════════════════════════════════════════════════ TITRE DE SECTION GÉNÉRIQUE ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ FORMULAIRE D'AJOUT DE MACHINE (section Gérer la flotte) ════════════════════════════════════════════════════════════ */ /* Conteneur flex : tous les champs alignés par le bas */ .fleet-add-form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin-bottom: 24px; } /* Chaque champ : label en haut, input en bas */ .fleet-add-form .field { display: flex; flex-direction: column; gap: 4px; } /* Label à hauteur fixe → tous les inputs s'alignent au même niveau */ .fleet-add-form .field label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; height: 2.2em; /* hauteur fixe = même base pour tous les champs */ display: flex; align-items: flex-end; /* texte collé en bas du label */ } /* Champ bouton : label invisible pour aligner le bouton avec les inputs */ .fleet-add-form .field-btn { display: flex; flex-direction: column; gap: 4px; } .fleet-add-form .field-btn::before { content: ''; display: block; height: 2.2em; /* même hauteur que les labels */ } /* ── Overrides : annule les règles génériques .update-section pour les inputs/selects qui sont DANS .fleet-add-form ── */ .fleet-add-form input, .fleet-add-form input[type=number], .fleet-add-form select { width: auto; /* annule width:100% de .update-section */ margin-bottom: 0; /* annule margin-bottom:12px */ padding: 8px 12px; /* harmonise la hauteur de tous les champs */ background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: 'DM Mono', monospace; font-size: 0.82rem; transition: border-color 0.15s; box-sizing: border-box; } .fleet-add-form input:focus, .fleet-add-form select:focus { outline: none; border-color: var(--accent); } .section-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin: 28px 0 14px 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* ══════════════════════════════════════════════════════════════════ Page Système de compression (/systeme) ────────────────────────────────────────────────────────────────── Ces règles étaient auparavant en