/* Fonds légèrement adoucis après comparaison visuelle, y compris le vert des rubriques renseignées : étapes, lignes du suivi, badges et rubriques renseignées restent visibles sur écran lumineux. Les textes sombres et couleurs métier sont conservés. */
/* Palette issue de ToshibaScan/app.py ; modifier ces variables pour ajuster la charte. */
:root { --red:#c8102e; --red-dark:#ac0d27; --red-soft:#f8cdd6; --ink:#292c31; --muted:#737780; --line:#e7e8eb; --bg:#f4f5f7; --white:#fff; }
/* Inclure bordures et espacements dans les dimensions calculées. */
* { box-sizing:border-box; }
/* Typographie système pour un rendu lisible sans télécharger de police externe. */
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 "Segoe UI",Arial,sans-serif; }
/* Les liens héritent de la couleur ; les actions sont distinguées par leur contexte. */
a { color:inherit; text-decoration:none; }
/* Les champs conservent la typographie globale et une hauteur accessible. */
button,input,select,textarea { font:inherit; }
/* Le focus reste visible au clavier, y compris sur les actions non soulignées. */
:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
/* Le lien d'évitement apparaît uniquement lorsqu'il reçoit le focus clavier. */
.skip { position:fixed; top:-70px; left:20px; z-index:10; padding:10px; background:white; }
/* Rendre l'accès rapide au contenu visible lors de la navigation clavier. */
.skip:focus { top:10px; }
/* Navigation fixe blanche sur grand écran pour préserver l'espace de travail. */
.sidebar { position:fixed; inset:0 auto 0 0; width:242px; background:white; border-right:1px solid var(--line); display:flex; flex-direction:column; padding:34px 20px 20px; }
/* Le bloc prend la largeur du logo pour centrer la légende dans le même axe. */
.brand { display:block; width:max-content; max-width:100%; padding:0 12px 28px; }
/* Respecter les proportions du logo et la largeur disponible dans le menu. */
.brand img { display:block; width:150px; max-width:100%; height:auto; }
/* Une légende centrée, sombre et semi-grasse reste lisible sous le logo. */
.brand span { display:block; margin-top:6px; text-align:center; font-size:12px; font-weight:700; color:var(--ink); }
/* L'espace de travail se distingue des liens de navigation. */
.workspace { display:flex; align-items:center; gap:11px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 10px; margin-bottom:20px; }
/* Le pictogramme reprend la couleur principale sans image externe. */
.workspace-icon { color:var(--red); font-size:24px; background:var(--red-soft); border-radius:9px; padding:3px 10px; }
/* Les sous-libellés sont affichés sous leur intitulé principal. */
small { display:block; color:var(--muted); font-size:12px; }
/* Regroupements du menu en libellés discrets et espacés. */
.nav-label { display:block; font-size:10px; letter-spacing:1.5px; color:#868a92; margin:21px 12px 10px; }
/* Les liens ont une surface suffisamment grande pour la souris et le tactile. */
nav a { display:flex; align-items:center; gap:12px; padding:12px; margin:3px 0; border-radius:7px; color:#666b75; }
/* Chaque icône occupe la même largeur pour aligner les libellés. */
nav a span { width:19px; font-size:19px; line-height:1; }
/* Sélection et survol visibles sans animation distrayante. */
nav a:hover,nav a[aria-current] { background:var(--red-soft); color:var(--red); }
/* Les informations de contexte restent en bas du menu lorsque la fenêtre le permet. */
.sidebar-bottom { margin-top:auto; padding:22px 12px; font-size:12px; }
/* Le rappel des données fictives s'aligne avec le texte de statut. */
.sidebar-bottom small { margin:6px 0 0 15px; font-size:11px; }
/* Pastille neutre de démonstration, sans prétendre à une connexion ATO active. */
.demo-dot { display:inline-block; width:6px; height:6px; background:#92969e; border-radius:50%; margin-right:6px; }
/* Séparation du profil de démonstration et du reste de la navigation. */
.profile { border-top:1px solid var(--line); padding:20px 10px 0; display:flex; gap:11px; align-items:center; font-size:12px; }
/* Avatar purement typographique, sans données personnelles. */
.avatar { background:#f2e9eb; color:var(--red); width:34px; height:34px; display:grid; place-items:center; border-radius:50%; font-weight:700; }
/* Décaler le contenu de la largeur de la navigation fixe. */
.main { margin-left:242px; }
/* Bandeau supérieur fin avec séparation du contexte et de l'indicateur de prototype. */
.topbar { min-height:72px; background:white; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding:0 38px; font-size:12px; }
/* Texte secondaire réutilisable dans tous les écrans. */
.muted { color:var(--muted); }
/* Étiquette de prototype toujours visible en haut de page. */
.test-badge { color:#6b7079; border:1px solid var(--line); border-radius:5px; padding:4px 8px; font-size:9px; letter-spacing:1px; }
/* Avertissement compact concernant la portée des actions. */
.demo-banner { background:#fff9fa; border-bottom:1px solid #f0dde1; color:#8f4c58; padding:10px 38px; display:flex; gap:20px; justify-content:space-between; font-size:11px; }
/* Le lien de périmètre se distingue sans devenir l'action principale. */
.demo-banner a { white-space:nowrap; font-weight:600; }
/* Marges principales identiques sur les différents écrans. */
main { padding:34px 38px 20px; max-width:1680px; margin:auto; }
/* Les titres disposent de leur propre rythme vertical. */
h1,h2,p { margin-top:0; }
/* Titre principal expressif mais compact pour une application métier. */
h1 { font-size:32px; letter-spacing:-1px; line-height:1.2; margin-bottom:9px; font-weight:650; }
/* Les titres de panneaux n'écrasent pas les données opérationnelles. */
h2 { font-size:16px; letter-spacing:-.2px; margin-bottom:4px; font-weight:650; }
/* La ligne supérieure porte la hiérarchie de la section. */
.eyebrow { color:var(--red); letter-spacing:1.8px; font-size:9px; font-weight:700; margin-bottom:12px; }
/* Les sous-titres restent lisibles mais secondaires. */
.subtitle { color:var(--muted); font-size:13px; margin-bottom:0; }
/* Le titre et l'action se répartissent de part et d'autre sur un écran large. */
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:32px; }
/* Style commun des liens-boutons et vrais boutons de formulaire. */
.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid #d8dbe0; border-radius:6px; padding:10px 16px; background:white; cursor:pointer; font-size:12px; font-weight:600; white-space:nowrap; }
/* L'action principale utilise la couleur officielle reprise de l'outil existant. */
.button.primary { background:var(--red); border-color:var(--red); color:white; }
/* Le survol accentue la couleur sans changer les dimensions du bouton. */
.button.primary:hover { background:var(--red-dark); }
/* Les actions secondaires signalent également leur interactivité. */
.button:hover { border-color:var(--red); }
/* Date et descriptif des indicateurs occupent la même ligne. */
.section-kicker { display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:14px; }
/* La date du jour est alignée à droite sans être saisie en dur. */
.section-kicker>span:last-child { margin-left:auto; color:var(--muted); font-size:11px; }
/* Petite pastille graphique de la zone d'activité locale. */
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--red); }
/* Quatre indicateurs de même importance sur grand écran. */
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:26px; }
/* Carte indicateur simple avec hauteur régulière. */
.metric { background:white; border:1px solid var(--line); border-radius:9px; padding:20px; }
/* Intitulé et pictogramme alignés sur une ligne. */
.metric>span { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:#676c75; }
/* Chiffres dominants pour permettre la lecture rapide de la charge. */
.metric strong { display:block; font-size:36px; font-weight:600; line-height:1.4; margin:10px 0 2px; letter-spacing:-1px; }
/* Les icônes d'indicateur ont un fond léger sans sémantique cachée. */
.metric i { font-style:normal; color:#737780; background:#f5f5f7; width:23px; height:23px; text-align:center; line-height:23px; border-radius:5px; }
/* L'alerte prioritaire utilise du rouge et un libellé, pas seulement une couleur. */
.metric.urgent { border-top:3px solid var(--red); padding-top:18px; }
/* Le chiffre d'urgence ressort de la population générale. */
.metric.urgent strong,.metric.urgent i { color:var(--red); }
/* Les cartes principales forment une colonne plus large pour les actions. */
.dashboard-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:start; }
/* Surface commune des panneaux. */
.panel { background:white; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
/* En-tête de panneau séparé du contenu. */
.panel-title { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:23px 24px 20px; border-bottom:1px solid var(--line); }
/* Description compacte sous le titre du panneau. */
.panel-title p { font-size:11px; color:var(--muted); margin:5px 0 0; }
/* Compteur discret des prochaines actions listées. */
.count { padding:3px 9px; border:1px solid var(--line); border-radius:5px; font-size:11px; }
/* Ligne d'action : icône, texte élastique et accès direct à la fiche. */
.priority-row { display:flex; gap:13px; padding:20px 24px; border-bottom:1px solid #f0f1f3; align-items:flex-start; }
/* Le survol identifie la ligne comme lien sans déplacer le contenu. */
.priority-row:hover { background:#fffafb; }
/* La zone textuelle prend tout l'espace libre et autorise les retours à la ligne. */
.priority-row>div { flex:1; min-width:0; }
/* Alignement du client et de son éventuelle alerte. */
.row-heading { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12px; }
/* La prochaine action constitue le deuxième niveau de lecture. */
.priority-row p { font-size:12px; margin:4px 0; color:#545a65; }
/* Les informations de site sont plus discrètes que l'action. */
.priority-row small { font-size:10px; }
/* Icône neutre pour les dossiers qui n'ont pas d'alerte de préparation. */
.priority-icon { width:30px; height:30px; flex-shrink:0; background:#f3f4f6; border-radius:7px; text-align:center; line-height:30px; font-size:16px; }
/* L'urgence combine pictogramme et fond de couleur. */
.priority-icon.red { background:var(--red-soft); color:var(--red); font-weight:700; }
/* L'accès vers la fiche reste visuellement secondaire. */
.row-arrow,.subtle-icon { color:#959aa3; }
/* Les états textuels ont une forme commune et une taille compacte. */
.pill { display:inline-block; border-radius:5px; padding:4px 7px; font-size:10px; line-height:1.3; font-weight:600; }
/* Couleur rouge uniquement pour une action prioritaire explicitement nommée. */
.pill.danger { background:var(--red-soft); color:var(--red); }
/* Distinction du parcours terrain sans le présenter comme une alerte. */
.pill.terrain { background:#ebd295; color:#7a6531; }
/* Les états ordinaires n'attirent pas l'attention au détriment des urgences. */
.pill.neutral { background:#d8e0ea; color:#59616d; }
/* Lien de pied de panneau sur toute la largeur. */
.panel-link { display:flex; justify-content:space-between; padding:15px 24px; color:var(--red); font-size:11px; font-weight:600; }
/* Espacement du fil d'activité et retrait des marqueurs. */
.timeline { padding:22px 24px 6px 42px; }
/* Chaque événement conserve une ligne verticale commune et reste cliquable. */
.event { display:block; position:relative; padding:0 0 22px 19px; border-left:1px solid var(--line); font-size:11px; }
/* Marqueur positionné sur le fil pour matérialiser la chronologie. */
.timeline-dot { position:absolute; width:7px; height:7px; border-radius:50%; background:#c9cdd4; left:-4px; top:5px; box-shadow:0 0 0 4px white; }
/* Le dernier événement n'a pas besoin d'un fil continu sous lui. */
.event:last-child { border-color:transparent; }
/* Date et auteur sont de taille secondaire dans l'historique. */
.event small,.event .muted { font-size:10px; }
/* Le client est identifié avant la description de l'action. */
.event b { display:block; margin:4px 0; font-size:11px; }
/* La description reste compacte pour conserver plusieurs événements visibles. */
.event p { margin-bottom:5px; color:#666c76; }
/* Encadré de règle métier lisible et distinct des alertes. */
.callout { display:flex; align-items:center; gap:18px; border:1px solid var(--line); border-radius:9px; background:#fafafb; margin-top:24px; padding:23px 24px; }
/* L'icône d'orientation terrain n'est pas un contrôle interactif. */
.callout-icon { font-size:25px; color:var(--red); }
/* Les rappels métier utilisent une hiérarchie plus légère que le titre de page. */
.callout h2 { font-size:13px; }
/* Éviter les marges superflues en bas des encadrés. */
.callout p { margin:5px 0 0; font-size:11px; color:var(--muted); }
/* Le lien vers le parcours terrain reste disponible à droite. */
.callout a { margin-left:auto; flex-shrink:0; font-size:11px; color:var(--red); }
/* Footer aligné sur les marges de contenu. */
footer { display:flex; justify-content:space-between; padding:24px 38px; color:#969aa2; font-size:10px; }
/* Filtres flexibles avec libellés visibles au-dessus de chaque saisie. */
.filters { display:flex; gap:14px; align-items:end; flex-wrap:wrap; margin-bottom:22px; }
/* Les labels restent visibles même lorsque le placeholder disparaît. */
.filters label { display:flex; flex-direction:column; gap:6px; font-size:11px; color:#606773; }
/* La recherche prend le maximum d'espace sur les écrans larges. */
.search-label { flex:1; min-width:230px; }
/* Tous les contrôles de saisie ont un fond blanc et une bordure perceptible. */
input,select,textarea { background:white; color:var(--ink); border:1px solid #d4d8df; border-radius:5px; padding:10px 11px; width:100%; min-height:40px; }
/* Les textes longs peuvent être redimensionnés verticalement. */
textarea { resize:vertical; }
/* Les liens secondaires de filtre gardent une couleur repérable. */
.text-link { color:var(--red); font-size:11px; padding-bottom:11px; }
/* Défilement local du tableau pour éviter un débordement global sur mobile. */
.table-scroll { overflow-x:auto; }
/* Table de suivi assez large pour ne pas écraser les colonnes métier. */
table { border-collapse:collapse; width:100%; min-width:1000px; text-align:left; }
/* En-têtes secondaires cohérents avec les labels de navigation. */
th { background:#fafafb; font-size:9px; color:#7e848e; letter-spacing:.7px; font-weight:600; padding:14px 18px; border-bottom:1px solid var(--line); }
/* Les cellules regroupent client, machine et série sans bordures verticales encombrantes. */
td { padding:20px 18px; border-bottom:1px solid var(--line); font-size:11px; }
/* Une légère réaction au survol facilite le suivi d'une ligne. */
tr:hover td { background:#fffafb; }
/* Le dernier dossier ne double pas la bordure du panneau. */
tr:last-child td { border-bottom:0; }
/* Le client est le lien principal de la ligne et reste identifiable. */
.client-link { font-size:12px; font-weight:650; }
/* Espacement entre les informations secondaires de la machine. */
td small { font-size:10px; margin-top:4px; }
/* Chiffres et identifiants alignés dans une police à chasse fixe. */
.mono { font-family:Consolas,monospace; font-size:11px; }
/* La progression dispose d'un libellé textuel indépendant de la jauge. */
.progress-label { font-size:10px; margin-bottom:5px; }
/* Jauge native accessible, avec un rendu cohérent sur les navigateurs courants. */
progress { width:90px; height:5px; border:0; border-radius:5px; background:#d2d9e3; accent-color:var(--red); }
/* Fond de progression pour les navigateurs Chromium. */
progress::-webkit-progress-bar { background:#d2d9e3; border-radius:5px; }
/* Couleur de progression pour les navigateurs Chromium. */
progress::-webkit-progress-value { background:var(--red); border-radius:5px; }
/* Limiter la largeur de prochaine action tout en conservant son texte intégral. */
.next-action { max-width:230px; }
/* Petit repère d'affectation sans simuler de photographie utilisateur. */
.owner-dot { display:inline-grid; place-items:center; margin-right:6px; width:23px; height:23px; background:#f0edf1; border-radius:50%; font-size:10px; }
/* Le lien d'ouverture garde une zone de clic confortable. */
.open-link { font-size:18px; padding:9px; color:var(--red); }
/* Les alertes de préparation restent explicites dans les lignes du tableau. */
.red-text { color:var(--red); }
/* L'état vide explique la situation au lieu d'afficher un tableau silencieux. */
.empty { padding:30px; color:var(--muted); text-align:center; }
/* Texte disponible pour les lecteurs d'écran sans ajouter de bruit visuel. */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
/* Lien de retour aux dossiers, visible au-dessus du titre détaillé. */
.back-link { display:inline-block; color:var(--muted); font-size:12px; margin-bottom:20px; }
/* La fiche laisse une colonne dédiée au parcours de travail. */
.detail-grid { display:grid; grid-template-columns:330px 1fr; align-items:start; gap:24px; }
/* Grille de saisie à deux colonnes pour réduire la hauteur de la fiche. */
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px; }
/* Les informations longues prennent toute la largeur du formulaire. */
.field.full { grid-column:1/-1; }
/* Les libellés évitent de dépendre du seul placeholder. */
.field label { display:block; font-size:11px; margin-bottom:6px; font-weight:600; }
/* Les cases à cocher restent de taille naturelle, distinctes des champs texte. */
.field input[type=checkbox] { width:18px; min-height:18px; }
/* Retrait régulier des formulaires à l'intérieur des panneaux. */
.editor { padding:24px; }
/* Retirer le décor natif du groupe tout en conservant sa désactivation globale. */
fieldset { border:0; padding:0; margin:0; min-width:0; }
/* Champs clôturés lisibles malgré leur état désactivé. */
fieldset:disabled input,fieldset:disabled textarea,fieldset:disabled select { background:#f5f5f7; color:#646a74; opacity:1; }
/* Aligner les boutons du formulaire en bas à droite. */
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; border-top:1px solid var(--line); padding-top:20px; }
/* Les erreurs serveur indiquent précisément les champs à corriger. */
.errorlist { color:var(--red); font-size:12px; padding-left:18px; }
/* Les messages ne dépendent pas uniquement d'une couleur pour signifier le résultat. */
.message { padding:13px 18px; margin-bottom:20px; border:1px solid #d8dee7; background:white; border-radius:6px; font-size:12px; }
/* Les erreurs ont un contraste cohérent avec les autres alertes de la plateforme. */
.message.error { color:var(--red); background:var(--red-soft); border-color:#f0cbd2; }
/* Les confirmations restent discrètes et lisibles. */
.message.success { border-left:4px solid #4c806b; }
/* Le rappel du parcours terrain se distingue du blocage technique. */
.terrain-notice { padding:18px 22px; background:#f5dd9e; border:1px solid #e8dfc5; border-radius:7px; margin-bottom:24px; font-size:12px; }
/* Supprimer la marge basse du dernier texte de rappel. */
.terrain-notice p { margin:6px 0 0; }
/* Chaque étape forme un bloc lisible avec son numéro et son action. */
.step { display:flex; gap:12px; padding:20px; border-bottom:1px solid var(--line); font-size:12px; }
/* Le marqueur d'étape porte aussi un numéro ou une coche. */
.step-number { width:25px; height:25px; flex-shrink:0; display:grid; place-items:center; border:1px solid #d6dae2; border-radius:50%; font-size:11px; color:var(--muted); }
/* Étape terminée visible textuellement et graphiquement. */
.step-number.done { background:var(--red); border-color:var(--red); color:white; }
/* État secondaire placé sous le nom d'étape. */
.step small { margin-top:4px; font-size:11px; }
/* Le bouton d'étape est une vraie soumission POST, visuellement légère. */
.step-button { background:none; border:0; padding:7px 0 0; font-size:11px; color:var(--red); cursor:pointer; text-align:left; }
/* La clôture reste distincte des validations individuelles. */
.close-form { padding:20px; }
/* Le bouton de clôture s'adapte à la largeur disponible. */
.close-form .button { width:100%; white-space:normal; }
/* Les prérequis de clôture restent visibles à côté de l'action. */
.close-form p { font-size:10px; margin:10px 0 0; }
/* L'historique détaillé se place après la fiche et son parcours. */
.history-panel { margin-top:24px; }
/* Trois colonnes pour date, événement et auteur. */
.history-row { display:grid; grid-template-columns:140px 1fr 190px; gap:20px; padding:17px 24px; font-size:11px; border-bottom:1px solid var(--line); }
/* Date et auteur ne concurrencent pas la description de l'événement. */
.history-row time,.history-row>span { color:var(--muted); }
/* Les services à raccorder sont présentés en deux colonnes. */
.integration-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
/* Espacement des cartes d'intégration. */
.integration { padding:26px; }
/* Le titre de service est séparé de son état de raccordement. */
.integration h2 { margin-top:19px; font-size:20px; }
/* Les descriptions expliquent le périmètre réel du prototype. */
.integration p { color:#666c76; font-size:13px; margin:12px 0; }
/* La légende reste compacte et se replie selon la place disponible. */
.stage-legend { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 20px; font-size:11px; }
/* Les étiquettes grises identifient les tâches encore à faire, sans faux avancement. */
.stage-chip { display:inline-block; padding:5px 8px; border:1px solid #d7dbe1; background:#f3f4f6; border-radius:4px; color:#505863; font-size:10px; font-weight:650; white-space:nowrap; }
/* Violet clair pour un cadrage effectivement réalisé. */
.stage-chip.complete.stage-cadrage { background:#d3b7f5; border-color:#c3abe9; color:#51367a; }
/* Jaune backup, conformément au repère confirmé par l'équipe. */
.stage-chip.complete.stage-sauvegarde { background:#ffdc3f; border-color:#ddc847; color:#5d4b00; }
/* Bleu pour la préparation technique effectuée. */
.stage-chip.complete.stage-preparation { background:#a5d0f5; border-color:#9fc8ee; color:#24517c; }
/* Vert clair pour l'installation effectuée ; la validation finale reste une étape distincte. */
.stage-chip.complete.stage-installation { background:#b7de91; border-color:#a0c879; color:#365b1d; }
/* Vert soutenu et coche textuelle pour une validation effectuée. */
.stage-chip.complete.stage-validation { background:#9bd2b9; border-color:#91c8b3; color:#245d47; }
/* Orange pour le passage de relais terrain, distinct d'une installation réalisée. */
.stage-chip.complete.stage-relais { background:#ffc471; border-color:#dcb46d; color:#735013; }
/* Une dispense justifiée n'est ni un travail à faire ni un travail réalisé. */
.stage-chip.not-applicable { border-style:dashed; background:white; color:#7c828c; }
/* Les colonnes d'étape gardent leur alignement même avec des notes disponibles. */
.stage-table { min-width:1270px; }
/* Réduire l'espace entre colonnes pour favoriser la lecture technique. */
.stage-table td,.stage-table th { padding:15px 12px; }
/* Le client conserve une colonne assez large pour identifier la machine. */
.stage-table td:first-child { min-width:220px; }
/* Une cellule d'étape regroupe état, technicien et éventuelle note. */
.stage-cell { min-width:105px; vertical-align:top; }
/* Signalement visible de note, avec accès clavier direct à l'étape. */
.note-indicator { display:block; font-size:10px; color:var(--red); margin-top:5px; text-decoration:underline; }
/* Donner de la place aux notes et sélecteurs dans la colonne de parcours. */
.detail-grid { grid-template-columns:minmax(340px, .85fr) minmax(0, 1.5fr); }
/* Une étape peut contenir plusieurs lignes de note sans dépasser son panneau. */
.step-content { width:100%; min-width:0; }
/* Un titre court remplace le numéro décoratif de l'ancienne présentation. */
.step-content h3 { margin:0 0 9px; font-size:13px; }
/* Le repère d'étape est visible après un accès depuis le tableau. */
.step { scroll-margin-top:20px; }
/* Les libellés du formulaire restent présents avec ou sans saisie. */
.step-editor label { display:block; font-size:11px; font-weight:600; margin:12px 0 5px; }
/* Bouton d'enregistrement distinct de la réalisation technique. */
.step-editor .button { margin-top:9px; padding:7px 11px; }
/* Les notes longues et retours à la ligne ne doivent pas provoquer de débordement. */
.step-note { overflow-wrap:anywhere; font-size:12px; padding:10px; background:#fafafb; }
/* Les couleurs de type structurent les blocs ; seul le badge et le fond de réalisation signifient terminé. */
.step-kind-cadrage { --stage-accent:#8054b1; --stage-tint:#dac2f3; }
/* Le backup conserve une identité jaune, avec un liseré assez contrasté sur fond blanc. */
.step-kind-sauvegarde { --stage-accent:#b99616; --stage-tint:#ffe87f; }
/* La préparation utilise les mêmes repères bleus dans la fiche et dans les colonnes du suivi. */
.step-kind-preparation { --stage-accent:#387eb7; --stage-tint:#b9d8f7; }
/* L'installation est séparée de la validation par un vert plus clair. */
.step-kind-installation { --stage-accent:#639336; --stage-tint:#c6e3a8; }
/* La validation utilise un vert foncé distinct pour le contrôle final. */
.step-kind-validation { --stage-accent:#2d8167; --stage-tint:#afdbc4; }
/* Le relais terrain reste orange et ne devient jamais une installation distante. */
.step-kind-relais { --stage-accent:#b97522; --stage-tint:#ffd195; }
/* Un fond neutre sépare les cartes, au lieu d'une longue colonne blanche uniforme. */
.steps-panel { background:#eef0f4; }
/* Le titre de parcours reste sur fond blanc pour distinguer la section des cartes individuelles. */
.steps-panel>.panel-title { background:white; }
/* Chaque étape devient un bloc bordé, espacé et marqué par son type sur le côté. */
.steps-panel .step { display:block; padding:0; margin:16px; background:white; border:1px solid #d5dae2; border-left:5px solid var(--stage-accent); border-radius:8px; box-shadow:0 2px 4px #25304308; overflow:hidden; }
/* L'en-tête rassemble numéro, nom et état pour permettre un repérage immédiat. */
.step-heading { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:15px 16px; background:var(--stage-tint); border-bottom:1px solid #dce0e7; }
/* Le numéro reste visible sans remplacer le nom de l'étape ni son état textuel. */
.step-index { font-size:12px; font-weight:750; color:var(--stage-accent); }
/* Le nom occupe l'espace principal et conserve sa lisibilité sur plusieurs lignes. */
.step-heading h3 { flex:1; margin:0; min-width:130px; font-size:14px; }
/* Les formulaires restent à l'intérieur de leur carte sans donner l'impression d'appartenir à la suivante. */
.step-content>.step-editor,.step-content>form:not(.step-editor) { margin:0; padding:0 16px 16px; }
/* Les traces de réalisation restent proches de l'en-tête de l'étape concernée. */
.step-content>small,.step-content>.step-note { margin:12px 16px; }
/* Les deux intentions sont alignées et se replient si la colonne est étroite. */
.step-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }
/* L'action de réalisation doit être plus visible que la sauvegarde d'informations. */
.step-actions .button { white-space:normal; }
/* La clôture est visuellement distincte des blocs d'étape. */
.steps-panel .close-form { margin:16px; padding:16px; background:white; border:1px solid #d5dae2; border-radius:8px; }
/* Les colonnes du tableau ont un bandeau de type, indépendant de l'état de chaque machine. */
.stage-table th.stage-column-heading { background:var(--stage-tint); border-top:4px solid var(--stage-accent); border-right:1px solid #d6dce5; color:#323d4a; font-size:10px; }
/* Une séparation verticale permet de suivre visuellement une étape sur plusieurs clients. */
.stage-table td.stage-cell { border-right:1px solid #e0e4eb; background:#f8f9fb; padding:10px 8px; }
/* Une vraie case regroupe état, technicien et note, même lorsque la tâche reste à faire. */
.stage-box { min-height:90px; padding:11px 9px; border:1px solid #d3d9e2; border-radius:6px; background:white; }
/* L'ensemble de la case réalisée est teinté, au-delà du seul petit badge. */
.stage-box-complete { background:var(--stage-tint); border-color:var(--stage-accent); box-shadow:inset 0 3px 0 var(--stage-accent); }
/* Hors parcours et dispenses restent neutres et distincts des étapes réalisées. */
.stage-box-na { background:#d8e0ea; border-style:dashed; color:#8a909b; }
/* Le nom du technicien est assez marqué pour identifier les relais entre colonnes. */
.stage-box small { margin-top:9px; color:#4d5664; font-weight:600; }
/* Le client reste identifiable pendant le défilement horizontal du tableau technique. */
.stage-table th:first-child,.stage-table td:first-child { position:sticky; left:0; z-index:1; background:white; border-right:2px solid #d6dce5; }
/* La date de livraison et le sens de l'appel restent ensemble dans une seule colonne. */
/* La ligne entière suit sa dernière étape réalisée ; la fermeture distante prend le vert de validation. */
.progress-cadrage { --row-tint:#d7b8f0; }
/* Jaune pour une machine dont le backup est la dernière étape validée. */
.progress-sauvegarde { --row-tint:#ffe16e; }
/* Bleu pour une préparation validée, sans supposer l'installation faite. */
.progress-preparation { --row-tint:#b2d2f2; }
/* Vert clair pour l'installation réalisée avant validation finale. */
.progress-installation { --row-tint:#bfde9d; }
/* Vert de validation pour la fin de parcours ou la clôture distante, même exceptionnelle et explicitement libellée. */
.progress-validation { --row-tint:#a5d3b9; }
/* Orange pour le relais réalisé ou la clôture d'un dossier terrain. */
.progress-relais { --row-tint:#ffc67c; }
/* Sans étape réalisée, le fond reste neutre. */
.progress-nouveau { --row-tint:#fff; }
/* La couleur de ligne doit rester continue, y compris sous les cellules de type et le client fixe. */
.stage-table tr.progress-row>td,.stage-table tr.progress-row:hover>td { background:var(--row-tint); }
/* Les cases individuelles restent lisibles sur ce fond d'avancement global. */
.progress-row .stage-box:not(.stage-box-complete):not(.stage-box-na) { background:#ffffffde; }
/* Les erreurs sont affichées dans la carte latérale, près des champs concernés. */
.step-form-errors { color:var(--red); background:var(--red-soft); padding:10px; margin-top:12px; border-radius:5px; font-size:12px; }
/* Une note sur le motif de clôture garde sa mise en forme sans étirer la fiche. */
.closure-reason { margin:8px 0 0; overflow-wrap:anywhere; }
/* Le motif de clôture est une saisie métier concise, distincte des notes d'étape. */
.close-form label { display:block; font-size:11px; margin:10px 0 6px; }
/* Donner un espacement clair entre motif et action de clôture. */
.close-form textarea { margin-bottom:12px; }
/* La date de livraison et le sens de l'appel restent ensemble dans une seule colonne. */
.delivery-cell { min-width:210px; vertical-align:top; }
/* Un rappel précis est lisible sans ouvrir la fiche ni déplier l'éditeur. */
.call-mode { border-top:1px solid var(--line); margin-top:9px; padding-top:9px; font-size:11px; }
/* Le créneau occupe une ligne distincte pour qu'il soit repéré immédiatement. */
.call-mode strong { display:block; margin-top:4px; font-size:13px; }
/* Accentuer le cas exceptionnel sans le confondre avec une étape technique réalisée. */
.scheduled-call { border-left:3px solid #4374a0; padding-left:8px; }
/* Le contrôle rapide est présent dans la ligne et ne remplace pas son résumé visible. */
.quick-planning { margin-top:9px; font-size:11px; }
/* Le résumé natif est activable au clavier et donne accès au formulaire sans navigation. */
.quick-planning summary { color:var(--red); cursor:pointer; }
/* L'éditeur conserve une largeur lisible dans la cellule de livraison. */
.quick-planning form { min-width:230px; padding-top:10px; }
/* Empiler les trois champs de l'éditeur rapide pour éviter des champs trop étroits. */
.quick-planning .form-grid { grid-template-columns:1fr; gap:12px; }
/* L'action rapide ne doit pas être confondue avec une validation d'installation. */
.quick-planning .button { margin-top:12px; padding:7px 12px; }
/* Séparer l'organisation de l'appel et le parcours technique sur la fiche complète. */
.organisation-panel,.callback-panel { margin-bottom:24px; }
/* Les rappels sont triés par créneau et restent consultables depuis l'accueil. */
.callback-row { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding:14px 24px; border-bottom:1px solid var(--line); font-size:12px; }
/* Le contexte d'appel est secondaire au jour, à l'heure et au client. */
.callback-row span { color:var(--muted); font-size:11px; }
@media(max-width:1200px) { .sidebar{width:210px;padding-left:14px;padding-right:14px}.main{margin-left:210px}main{padding:28px 24px}.topbar,.demo-banner{padding-left:24px;padding-right:24px}.metrics{gap:10px}.metric{padding:16px}.metric.urgent{padding-top:14px}.dashboard-grid{gap:16px;grid-template-columns:1.15fr 1fr}.callout{flex-wrap:wrap}.callout a{margin-left:0}.detail-grid{grid-template-columns:285px 1fr}.metric>span{font-size:10px} }
/* Sur tablette, conserver la navigation en tête et empiler les panneaux de contenu. */
@media(max-width:900px) { .sidebar{position:static;width:auto;padding:18px 22px;display:block;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0}.brand img{width:132px}.workspace,.sidebar-bottom,.profile,.nav-label{display:none}nav{display:flex;gap:8px;margin-top:18px}nav a{font-size:12px;margin:0;padding:8px}.main{margin:0}.topbar{min-height:50px}.metrics{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.detail-grid{grid-template-columns:1fr}.demo-banner{flex-direction:column;gap:4px}.history-row{grid-template-columns:120px 1fr}.history-row>span{grid-column:2}.page-heading{align-items:flex-start} }
/* Sur téléphone, préserver la lisibilité et éviter tout débordement global. */
/* Trois cartes par rangée séparent clairement les nouveautés du travail à traiter. */
.dashboard-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
/* La provenance locale et la portée du marquage de lecture restent explicites, sans faux statut ATO. */
.dashboard-source { font-size:11px; color:var(--muted); margin:-15px 0 24px; }
/* Chaque événement pertinent tient sur une ligne structurée, repliable sur écran étroit. */
.news-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:16px 24px; border-bottom:1px solid var(--line); font-size:12px; }
/* Le type du changement est lisible avant le client et les dates. */
.news-kind { min-width:170px; color:#606978; font-size:11px; }
/* Le client et les valeurs modifiées utilisent l'espace restant. */
.news-row>div { flex:1; min-width:160px; }
/* Les dates de livraison restent secondaires au nom du client. */
.news-row p { margin:3px 0 0; font-size:11px; color:#626b78; }
/* Les cartes d'action sont espacées des nouveautés et des tâches à répartir. */
.action-grid,.unassigned-panel { margin-top:24px; }
/* Les actions regroupent client, échéance et contexte sans recopier tout le tableau de machines. */
.action-row { display:flex; flex-wrap:wrap; gap:6px 16px; padding:16px 24px; border-bottom:1px solid var(--line); font-size:12px; }
/* La prochaine action occupe une seconde ligne lisible. */
.action-row small { flex-basis:100%; }
/* Les échéances sont alignées à droite lorsqu'il y a assez de place. */
.action-row strong { margin-left:auto; font-size:11px; }
/* La répartition liste une étape par ligne plutôt qu'un dossier globalement attribué. */
.assignment-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding:14px 24px; border-bottom:1px solid var(--line); font-size:12px; }
/* Le nom de l'étape prend l'espace libre entre machine et état d'affectation. */
.assignment-row>span:not(.pill) { flex:1; min-width:180px; color:#626b78; }
/* Le bandeau explique pourquoi le suivi affiche un sous-ensemble de ses machines. */
.focus-banner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:12px 16px; margin-bottom:20px; background:#eaf0f8; border:1px solid #cdd8e7; border-radius:6px; font-size:12px; }
/* Les cartes et formulaires s'empilent sur mobile sans réduire les textes à une taille illisible. */
@media(max-width:650px) { .dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.news-panel .panel-title{flex-wrap:wrap}.news-kind{min-width:0}.news-row{padding:16px 20px}.assignment-row{padding:14px 20px} }
/* Sur téléphone, préserver la lisibilité et éviter tout débordement global. */
@media(max-width:560px) { main{padding:24px 16px}.topbar{padding:0 16px;font-size:10px}.topbar .muted{display:none}.demo-banner{padding:10px 16px}.page-heading{flex-direction:column;gap:18px;margin-bottom:25px}h1{font-size:27px}.metrics{gap:10px}.metric strong{font-size:30px}.metric small{font-size:10px}.metric>span{min-height:30px}.metric i{display:none}.section-kicker>span:last-child{display:none}.form-grid,.integration-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.editor,.panel-title{padding:20px}.priority-row{padding:17px 20px}.history-row{display:block;padding:16px 20px}.history-row b{display:block;margin:5px 0}.callout{padding:20px}footer{padding:20px 16px;gap:10px;flex-direction:column}nav a span{display:none}nav a{font-size:11px}.filters label{width:100%}.filters .search-label{min-width:0}.test-badge{font-size:8px} }

/* Les trois mois restent compacts et comparables, sans reproduire de grandes cartes. */
.statistics-months { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:0 24px 22px; }
/* Chaque valeur mensuelle est présentée sous son mois pour une lecture rapide. */
.statistic-month { display:flex; flex-direction:column; gap:8px; }
/* Une taille intermédiaire suffit à distinguer le nombre du libellé. */
.statistic-month strong { font-size:26px; }
/* Les étapes forment une seule bande sur grand écran et gardent leur couleur métier. */
.statistics-stages { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; padding:0 24px 22px; }
/* La bordure colorée indique le type ; ces nombres ne sont pas des badges de validation. */
.statistic-stage { border-top:4px solid var(--stage-accent,#c8102e); background:var(--stage-tint,#f5f6f8); padding:12px; border-radius:6px; display:flex; flex-direction:column; gap:10px; color:inherit; text-decoration:none; }
/* Les nombres restent saillants sans allonger la bande des étapes. */
.statistic-stage strong { font-size:26px; }
/* Les libellés courts restent lisibles dans les sept colonnes. */
.statistic-stage span { font-size:12px; }
/* Sur les écrans étroits, répartir la bande en plusieurs lignes plutôt que tronquer les étapes. */
@media(max-width:1000px) { .statistics-stages { grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Deux colonnes conservent la lisibilité des nombres sur téléphone. */
@media(max-width:560px) { .statistics-stages { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* La dispense appartient visuellement à sa carte et reste séparée des actions de réalisation. */
.step-dispensation { border-top:1px solid #d8dce3; padding-top:16px; margin-top:20px; display:grid; gap:10px; }
/* Garder la case à taille native plutôt qu'à la largeur des champs de texte. */
.step-dispensation input[type=checkbox] { width:auto; margin-right:8px; }
/* Garder la case et son texte sur la même ligne malgré les styles verticaux des autres champs d'étape. */
.step-dispensation label:first-of-type { display:flex; flex-direction:row; align-items:center; gap:8px; }
/* Le bouton de secours disparaît après activation JavaScript malgré le display défini par .button. */
.filters button[hidden] { display:none; }

/* Les rubriques techniques restent séparées et repliables dans la fiche. */
.fiche-section { border:1px solid #d8dce3; border-radius:8px; margin-bottom:16px; padding:16px; }
/* Un titre visible donne une cible confortable pour ouvrir une rubrique. */
.fiche-section summary { cursor:pointer; font-weight:700; padding:4px 0; }
/* Les champs ne collent pas au titre lorsque la rubrique est ouverte. */
.fiche-section[open] summary { margin-bottom:16px; }
/* Le panneau de ressources précède le parcours avec un espacement clair. */
.machine-files { margin-bottom:24px; }
/* Les actions de chaque fichier restent sur sa propre ligne et passent à la ligne sur écran étroit. */
.machine-file { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 0; border-bottom:1px solid #e1e4e8; }
/* Le nom occupe la place disponible sans imposer une largeur excessive. */
.machine-file>div { flex:1; min-width:180px; overflow-wrap:anywhere; }
/* La taille, le type et la date sont des informations secondaires du fichier. */
.machine-file small { display:block; color:#6b7280; margin-top:5px; }

/* Le résumé d'appel reste compact, avec édition repliée par défaut. */
.compact-call-summary { padding:14px 24px; display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; gap:12px; }
/* L'éditeur prend seulement la place nécessaire lorsqu'il est ouvert. */
.compact-call details { min-width:200px; }
/* Garder une séparation entre le lien d'ouverture et les champs d'appel. */
.compact-call details[open] form { margin-top:16px; }

/* Les statuts historiques de problème et attente restent visibles sans fabriquer une réalisation. */
.progress-probleme { --row-tint:#f1b8c2; }
/* L'attente client est distincte d'une machine installée ou d'une sauvegarde réalisée. */
.progress-attente { --row-tint:#d2d9e3; }
/* Les codes historiques non expliqués sont signalés en bleu clair jusqu'à qualification. */
.progress-a-qualifier { --row-tint:#b6daf2; }
/* Le contenu de commande reste secondaire, replié après les éléments de suivi d'installation. */
.secondary-order { margin-top:24px; }
/* Un simple intitulé remplace le grand panneau d'articles ouvert en haut de fiche. */
.secondary-order>summary { cursor:pointer; padding:16px 24px; font-size:13px; color:#606773; }

/* Vert doux : fonction à installer, sans signifier qu'elle est déjà réalisée. */
.fiche-section select.fonction-installer { background:#b2e3c5; border-color:#4b9f6b; color:#205b38; }
/* Le titre reste repérable quand la rubrique contenant du texte est repliée. */
.fiche-section.rubrique-renseignee > summary { background:#b2e3c5; color:#205b38; border-radius:5px; padding:8px 10px; }

/* Report ou dysfonctionnement : rouge distinct des couleurs d’étape, avec libellé explicite. */
.progress-reprise-installation { --row-tint:#f3bfc8; }
/* La fiche montre la note dans une alerte visible indépendamment du parcours. */
.installation-reprise-alert { background:#f8d3d9; border:1px solid #d98292; border-left:5px solid #b92845; color:#702337; border-radius:7px; padding:16px 20px; margin-bottom:20px; }
/* Un badge complète la couleur du fond pour permettre la lecture sans perception des couleurs. */
.reprise-installation-badge { display:inline-block; background:#f8d3d9; color:#702337; border:1px solid #d98292; border-radius:4px; padding:4px 7px; font-size:11px; font-weight:700; margin-bottom:7px; }

/* Les categories du catalogue restent distinctes et passent a la ligne sur petit ecran. */
.catalogue-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
/* Chaque onglet est un lien natif, lisible et utilisable sans script. */
.catalogue-tabs a { display:flex; align-items:center; gap:10px; padding:12px 18px; border:1px solid #d3d7df; border-radius:8px; background:#fff; color:#333; text-decoration:none; font-weight:600; }
/* Le rouge TRSO marque clairement la seule liste actuellement affichee. */
.catalogue-tabs a[aria-current="page"] { background:#bf102d; border-color:#bf102d; color:#fff; }
/* Le compteur reste discret et suit la couleur de l'onglet actif. */
.catalogue-tabs span { background:rgba(127,127,127,.14); border-radius:12px; padding:2px 8px; font-size:12px; }
/* Le focus clavier reste visible sur tous les onglets. */
.catalogue-tabs a:focus-visible { outline:3px solid #c55b6f; outline-offset:3px; }
/* Le releve ECC appartient au materiel repris, separe visuellement des champs de la nouvelle machine. */
.ecc-reprise { margin:14px 0 0; padding:14px 16px; border:1px solid #bdd4c8; border-left:4px solid #458469; border-radius:8px; background:#edf6f0; }
/* Les listes d'applications et licences restent compactes dans la fiche technique. */
.ecc-reprise ul { margin:6px 0 12px; padding-left:20px; }

/* Garder les rubriques lisibles et laisser défiler le menu lorsque la hauteur manque. */
.sidebar { overflow-y: auto; }
.sidebar .nav-groupe { margin: 0 0 8px; }
.sidebar .nav-sous-label { display: block; margin: 8px 12px 4px; color: var(--ink); font-size: 12px; font-weight: 700; }
.sidebar .nav-groupe a { padding: 7px 12px 7px 18px; margin: 1px 0; font-size: 13px; }
.sidebar .nav-bas { margin-top: auto; padding-top: 12px; }
@media(max-width:900px) {
  /* Les rubriques restent consultables sur mobile et se répartissent sur plusieurs lignes. */
  .sidebar nav { flex-wrap: wrap; align-items: flex-start; }
  .sidebar .nav-groupe { margin: 0; }
  .sidebar .nav-sous-label { margin: 0 8px 4px; }
  .sidebar .nav-groupe a { padding: 6px 8px; }
  .sidebar .nav-bas { padding-top: 0; margin-top: 8px; }
}

/* Les bandeaux et les bordures de structure ont leur propre palette, distincte des états métier. */
:root { --structure-bordure:#c9d2de; --structure-entete:#e2e9f3; --structure-titre:#f2e5e9; }

/* Le titre et ses actions forment un bandeau compact, identifiable dès l’arrivée sur la page. */
.page-heading { background:var(--structure-titre); border:1px solid #ddc9d1; border-left:5px solid var(--red); border-radius:10px; padding:clamp(14px, 2vw, 22px); margin-bottom:22px; overflow-wrap:anywhere; }
.page-heading .subtitle { margin-bottom:0; }
.page-heading > .button { flex-shrink:0; }

/* Les titres de panneaux et les filtres se détachent des surfaces de travail.
   La grille d’étapes et la fiche technique conservent leurs styles métier. */
.panel:has(> .panel-title):not(.detail-grid > .panel) { border-color:var(--structure-bordure); }
.panel:not(.detail-grid > .panel) > .panel-title:first-child { background:var(--structure-entete); border-bottom-color:var(--structure-bordure); padding-block:15px; }
main > .filters { background:#e9edf4; border:1px solid var(--structure-bordure); border-radius:9px; padding:14px 16px; }
.integration-grid > .integration { border-color:var(--structure-bordure); border-top:4px solid #6d829d; }

/* Sur la fiche, l’appel, les références ATO et les ressources ont des repères séparés. */
.compact-call { background:#dfe9f6; border-color:#b9cada; border-left:4px solid #607d9e; margin-bottom:14px; }
.compact-call .call-mode { border-top-color:#b9cada; }
.compact-call details > summary { cursor:pointer; font-weight:650; color:#263f5b; }
.detail-source { color:#46566b; margin:0 0 14px; padding:8px 12px; border:1px solid var(--structure-bordure); border-radius:7px; background:#e9edf3; }
.detail-liens { margin-bottom:24px; }
.detail-lien + .detail-lien { border-top:1px solid var(--structure-bordure); }

/* L’état ATO se lit dans la barre latérale sans occuper le haut des pages de travail. */
.synchro-ato { display:block; width:fit-content; margin:0 0 8px; padding:8px 12px; border-radius:7px; background:#e9edf4; color:#34475f; font-size:12px; }
.synchro-ato b, .synchro-ato span { display:block; }
.synchro-ato:hover { background:#dfe9f6; }