:root{ /* LA LARGEUR DE LA PAGE -- une seule valeur, cinq endroits la lisent (voir plus bas). 980px etait une colonne de LECTURE : bonne pour du texte, couteuse pour un tableau de suivi. Demande de Frederick, 29 aout 2026 : « un rendu plein ecran ». Au-dela de 1600px la ligne cesse de s allonger : un paragraphe y devient penible et les colonnes se perdent. Pour changer d avis, c est ICI et nulle part ailleurs. */ --largeur-page: min(1600px, 96vw); --panel-bg: #16181c; --panel-face: #1f2227; --panel-face-2: #24272d; --hairline: #33373f; --amber: #ffb200; --amber-dim: #8a6200; --green: #4fd68a; --red: #ff5c5c; --blue: #6fa8ff; --grey-text: #9aa0ab; --white-text: #eef0f3; /* LE FOND DU PANNEAU DE MENU, SEUL -- constat du 27 aout 2026 : "le fond du menu devrait etre plus pale pour bien differencier le popup du fond d'ecran". Mesure : `.nav-menu-panel` utilisait `var(--panel-face)` (#1f2227) au-dessus d'un corps de page qui vaut #1c1f24 pres du coin ou le panneau s'ouvre (le sommet du degrade radial du `body`, voir plus bas) -- un rapport de contraste WCAG de 1,04:1, soit visuellement confondu. Cette variable est DEDIEE au panneau de menu, et n'est PAS `--panel-face` : cette derniere est partagee par `.panel`, `.aircraft-switcher` et le popup de nouveautes sur toutes les pages -- l'elargir aurait reclaire vingt-huit ecrans pour corriger un seul. #414855 porte le panneau a 1,8:1 contre le coin superieur du degrade (verifie par scripts/essai-nav-menu-contraste.js, qui rejoue la VRAIE feuille de style dans un Chromium et exige >=1,6 avec marge). Le texte ambre des liens (--amber, #ffb200) y garde un contraste de ~5,1:1 -- toujours lisible, mesure dans le meme essai. */ --nav-menu-panel-bg: #414855; /* LE SELECTEUR D'AERONEF, SEUL -- constat du 27 aout 2026, personne independante : "grossir le dropdown de selection d'avion pour qu'il soit visible". C'est le controle le PLUS utilise du produit (aircraft.html, tracking.html, certifications.html, documents.html) : tout ce qui s'affiche depend de quel appareil y est choisi. Mesure AVANT correctif, Chromium reel, aux deux largeurs (scripts/essai-dropdown-avion.js) : 32px de haut, police 12.5px, fond `var(--panel-face)` (#1f2227) contre le sommet du degrade du `body` (#1c1f24) -- un contraste de 1,04:1, EXACTEMENT le meme defaut mesure ce jour-la sur le panneau de menu (voir --nav-menu-panel-bg juste au-dessus). Cette variable est DEDIEE au selecteur d'aeronef et n'est PAS `--panel-face`, qui reste partagee par `.panel` et le popup de nouveautes sur vingt-huit ecrans -- meme raisonnement que pour --nav-menu-panel-bg, meme valeur deja mesuree a 1,8:1 contre ce fond (essai-nav-menu-contraste.js), reprise ici plutot qu'une troisieme couleur inventee sans mesure. */ --aircraft-switcher-bg: #414855; } *{box-sizing:border-box;} /* « HIDDEN » VEUT DIRE CACHE -- une seule fois, pour tout le produit. La regle du navigateur est `[hidden] { display:none }`, de specificite (0,1,0). N IMPORTE QUEL `display` ecrit ailleurs la bat : un style en ligne toujours, un selecteur d id (1,0,0) aussi. Le 7 septembre 2026, `#lot-barre` du questionnaire d equipement portait `hidden` ET `style="display:flex"` : `barre.hidden = true` n a rien cache, la barre est restee a l ecran avec zero case cochee (78 px mesures), et son script sortait avant d ecrire les libelles. Frederick a lu TROIS BOUTONS VIDES sur un ecran de navigabilite. Mesure avant de poser la regle : 2 noeuds portent `hidden` dans tout public/*.html, et AUCUN script ne les rend visibles en ecrivant `style.display` -- personne ne perd rien. Le garde derive vit dans scripts/essai-297-repondre-en-bloc.js (section 8). */ [hidden]{display:none !important;} body{ margin:0; background: radial-gradient(ellipse at top, #1c1f24 0%, #101216 60%); color:var(--white-text); font-family:'Inter',sans-serif; min-height:100vh; padding:0 0 60px 0; } .rivet-strip{ height:10px; background:repeating-linear-gradient(90deg, #2a2d33 0 6px, #16181c 6px 14px); border-bottom:1px solid var(--hairline); } /* ⚠ LA PLEINE LARGEUR EST UNE EXCEPTION NOMMÉE, PAS UN NOUVEAU DÉFAUT. `min(1600px, 96vw)` protège la LISIBILITÉ : une ligne de texte de 1900 px ne se lit pas, et la plupart des écrans du produit sont faits pour être lus. Les compléments d'aéronef, eux, portent des tableaux et des listes de décisions à trancher — la marge leur coûte de la place utile sans rien leur rendre. Frederick l'a demandé le 31 août 2026. ON REDÉFINIT LA VARIABLE plutôt que de surcharger chaque bloc : `header`, `main`, `.section` et `footer` la lisent tous les quatre. Une surcharge bloc par bloc élargirait le contenu en laissant le titre centré à 1600 px au-dessus — un décalage plus voyant que la marge qu'on voulait supprimer. Le remplissage de 20 px des sections reste : la pleine largeur ne veut pas dire coller au bord de l'écran. Mesuré par scripts/essai-largeur-complements.js, qui vérifie AUSSI qu'une page sans la classe reste étroite -- sinon « tout élargir » sortirait vert. */ body.pleine-largeur{ --largeur-page: 100%; } header{ padding:32px 20px 20px; max-width:var(--largeur-page); margin:0 auto; } /* Mini-menu de changement d'aeronef (aircraft.html/tracking.html) -- demande explicite : "pouvoir changer d'avion sans revenir necessairement" a la liste. */ /* GROSSI le 27 aout 2026 -- constat d'une personne independante : "grossir le dropdown de selection d'avion pour qu'il soit visible". C'est le controle le plus utilise du produit : tout l'ecran depend de quel aeronef y est choisi, et sur telephone (mesure a 390px) c'est la que la place manque le plus. AVANT : 32px de haut, police 12.5px, padding 7px 10px, fond confondu au fond de page (1,04:1, voir --aircraft-switcher-bg ci-dessus). APRES, mesure par scripts/essai-dropdown-avion.js dans un Chromium reel, aux DEUX largeurs (1280 et 390px, le controle est en flux, sa hauteur ne depend pas de la largeur d'ecran) : 46px de haut (au-dessus du seuil de cible tactile recommande, 44px, Apple/Material), police 15px, fond a 1,8:1 contre le fond de page -- et rien ne deborde de l'ecran a 390px (essai-alignement-vertical.js verifie le meme genre de depassement ailleurs ; ce script verifie celui-ci). */ .aircraft-switcher{ margin-top:10px; background:var(--aircraft-switcher-bg); color:var(--white-text); border:1px solid var(--hairline); border-radius:6px; padding:12px 14px; font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; width:100%; max-width:320px; min-height:44px; } .site-logo{ height:40px; width:auto; display:block; margin-bottom:14px; } /* Pied de page -- petit logo FH Aeroservices (l'entreprise editrice) a cote du copyright/de la version, voir footer.copyright -- demande explicite de garder ce logo visible mais discret maintenant que le gros logo en en-tete de page est celui de ReadyAero (le produit). */ /* Le pied de page tient sur UNE ligne : logo et copyright a gauche, politiques a droite (voir .site-footer-links, pousse par margin-left:auto). flex-wrap pour que les liens passent proprement en dessous sur un ecran etroit plutot que de deborder. */ .site-footer{ display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; } .footer-logo{ height:26px; width:auto; opacity:.85; flex-shrink:0; } .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:10px; } .eyebrow a{ color:var(--amber); } /* ================================================================================================ LA COULEUR DES LIENS — posée le 19 septembre 2026, et elle manquait DEPUIS LE DÉBUT ================================================================================================ 📊 MESURE : `a{`, `a:link`, `a:visited` rendaient **0** dans ce fichier. Les **93 liens nus** du produit tombaient donc sur le bleu par défaut du navigateur — #0000EE sur un fond #16181c. Illisible, et personne ne l'avait dit jusqu'à ce que Frederick le voie sur l'écran de masse et centrage : « les bouton bleu ne sont pas visible ». 🛑 C'EST UNE RÈGLE DE SOURCE, PAS UN CORRECTIF D'ÉCRAN. Corriger les liens de l'écran qui a été signalé aurait laissé les 92 autres, et le prochain lien écrit serait né bleu (§ 8 : corriger la FORME, jamais l'occurrence). 📐 L'AMBRE PLUTÔT QU'UN BLEU CLAIR : son contraste est **déjà mesuré** dans ce fichier (« ~5,1:1 — toujours lisible »). Un produit lu en hangar, sur un écran que personne n'étalonne, ne reçoit pas une couleur choisie au jugé. ⚠️ CE QUI N'EST PAS TOUCHÉ, ET POURQUOI. `.btn`, `.btn.secondary` et `.eyebrow a` posent **leur propre** `color` : leur spécificité l'emporte, ils gardent exactement leur allure. Cette règle ne rattrape que ce qui n'était habillé par personne. ⚠️ AUCUN `@media print` N'EXISTE DANS CE FICHIER — vérifié avant de poser la couleur. Les documents imprimés sont des PDF fabriqués au serveur ; l'ambre sur blanc n'est donc jamais servi par cette règle. */ a{ color:var(--amber); } a:hover{ text-decoration:underline; } h1{ font-size:clamp(22px,4vw,32px); margin:0 0 8px; font-weight:800; letter-spacing:-0.01em; } /* 9 sept. 2026 : 640px cassait « Vue d ensemble de tous tes aeronefs... » au tiers de la ligne sur un ecran large, ce qui donnait a l en-tete un air a l etroit alors que la page venait de passer en pleine largeur. 900px tient encore sous les ~75 caracteres au-dela desquels une ligne devient penible a suivre. */ .sub{ color:var(--grey-text); font-size:14.5px; max-width:900px; line-height:1.55; } .warning-banner{ max-width:var(--largeur-page); margin:18px auto 0; padding:12px 16px; background:rgba(255,92,92,0.08); border:1px solid rgba(255,92,92,0.35); border-radius:6px; font-size:13px; line-height:1.5; color:#ffb3b3; } .warning-banner b{color:#ff8080;} main{ max-width:var(--largeur-page); margin:28px auto 0; padding:0 20px; display:grid; grid-template-columns:1fr; gap:20px; } main.two-col{ grid-template-columns:1fr; } @media(min-width:860px){ main.two-col{grid-template-columns: 380px 1fr;} } /* Fiche aeronef en pleine largeur en haut de aircraft.html (voir demande : liberer la largeur pour la liste des AD en dessous) -- info a gauche, boutons d'action a droite sur ecran large, empiles sur mobile. */ .fiche-panel{ display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; } /* 🛑 LE PLANCHER NE PEUT PAS ETRE PLUS LARGE QUE LA BOITE QUI LE PORTE. `min-width:280px` etait un plancher INCONDITIONNEL : a 360 px d ecran, la boite de contenu de `.panel` ne fait plus que 278 px (360 - 2x20 de `main` - 2x20 de rembourrage - 2x1 de bordure), et 263 px des qu une barre de defilement de 15 px prend sa place. Le panneau debordait donc de 2 a 17 px selon la barre -- absorbe par le `overflow-x:auto` de `.panel` sous 760 px, ce qui en faisait un defilement lateral A L INTERIEUR d une fiche aeronef, jamais rouge chez aucun garde puisque la PAGE, elle, ne debordait pas. `min()` borne le plancher a la largeur reellement disponible. Au-dessus de 280 px de boite -- c est-a-dire des 390 px d ecran, et sur tout ecran de bureau -- il vaut 280 px comme avant : le point de bascule a deux colonnes (280 + 24 de gouttiere + 220) ne bouge pas. */ .fiche-panel-info{ flex:2; min-width:min(280px, 100%); } .fiche-panel-actions{ flex:1; min-width:220px; display:flex; flex-direction:column; } .fiche-panel-actions .full{ margin-top:8px; } .fiche-panel-actions .full:first-child{ margin-top:0; } .section{ max-width:var(--largeur-page); margin:20px auto 0; padding:0 20px; } /* UNE SECTION DÉJÀ DANS `main` NE REPREND PAS LA GOUTTIÈRE : ELLE L'A DÉJÀ. Frederick, 19 août 2026 : « dans la page AD, les boîtes à partir de "partager avec un technicien" sont désalignées ». Mesuré sur staging à 1280 px, fiche aéronef : main x=190 Fiche aéronef main x=190 Résultat de l'évaluation hors x=170 Partager avec un technicien <-- la rupture est ICI hors x=170 AD manquantes La cassure tombe exactement sur la balise ``. `main` porte déjà max-width:980px et padding:0 20px ; les deux sections QU'IL CONTIENT reprenaient les mêmes 20 px par-dessus, et se retrouvaient poussées de 20 px vers l'intérieur. Celles qui suivent, hors du `main`, sont au bon endroit -- ce sont les deux premières qui avaient tort. `aircraft.html` est le SEUL écran qui imbrique ainsi (vérifié sur les 31 pages) : le correctif ne peut donc rien déplacer ailleurs. La marge verticale part aussi, l'espacement étant déjà assuré par le `gap:20px` de la grille de `main` -- la garder ajouterait 20 px de blanc à chaque section. PREMIÈRE VERSION DE CE CORRECTIF : `max-width:none`. Elle alignait bien les bords gauches (170 px partout, mesuré) mais faisait passer les panneaux imbriqués de 940 à 1701 px de large -- un élément de grille prend sa largeur de son CONTENU quand plus rien ne le borne, et `min-width:auto` l'empêche même de rétrécir. Un défaut échangé contre un autre, que seule la mesure a montré. `100%` borne à la colonne, `min-width:0` autorise le rétrécissement. */ main > .section{ max-width:100%; min-width:0; margin:0; padding:0; } .panel{ background:linear-gradient(180deg, var(--panel-face) 0%, var(--panel-face-2) 100%); border:1px solid var(--hairline); border-radius:10px; padding:20px; position:relative; } .panel h2{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-text); margin:0 0 16px; display:flex; align-items:center; gap:8px; } .panel h2::before{ content:""; width:6px;height:6px;border-radius:50%; background:var(--amber); box-shadow:0 0 6px var(--amber); } label{ display:block; font-size:12px; color:var(--grey-text); margin:14px 0 6px; font-family:'IBM Plex Mono',monospace; letter-spacing:.02em; } label:first-of-type{margin-top:0;} select, input[type=text], input[type=date], input[type=email], input[type=password], input[type=tel], input[type=file], input[type=number], textarea{ width:100%; background:#0f1114; border:1px solid var(--hairline); color:var(--white-text); padding:9px 10px; border-radius:5px; font-family:'IBM Plex Mono',monospace; font-size:13.5px; outline:none; } select:focus, input:focus, textarea:focus{ border-color:var(--amber-dim); box-shadow:0 0 0 2px rgba(255,178,0,0.12); } .fiche-line{ font-size:12.5px; color:var(--grey-text); margin:5px 0; } .fiche-line b{ color:var(--white-text); font-weight:600; } .fiche-empty{ color:var(--grey-text); font-size:12.5px; font-style:italic; margin-top:10px; } .tag-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .tag{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:2px 7px; border-radius:3px; background:rgba(255,255,255,0.06); color:var(--grey-text); border:1px solid var(--hairline); } /* ================================================================================================ LE PLANCHER DE LA CIBLE AU DOIGT -- #151 / H3, remesure le 4 septembre 2026 CE QUE LE CARNET 3.3 DISAIT, ET POURQUOI C ETAIT INCOMPLET. Il fermait H3 sur la mesure au doigt de Frederick (29 aout) : cinq rangees de boutons aux VRAIES tailles, cinq visees chacune, « aucun rate, meme a 26 px ». Les tailles essayees etaient 26 · 28 · 36 · 40 · 44 px, et le 26 venait d un tableau CALCULE depuis cette feuille de style (padding + police x interligne + bordures). 🛑 CE CALCUL NE VOYAIT PAS LES `style="padding:3px 8px; font-size:11px"` ECRITS DANS LE HTML. Ils ecrasent la classe, et il y en a une trentaine. Mesure dans un vrai Chromium, aux deux largeurs (1280 et 390) : le plancher REEL du produit est **20 px**, pas 26 -- six pixels SOUS la plus petite cible que la main de l utilisateur ait jamais essayee. Le plus petit de tous porte « Desactiver » : encore une fois, le plus petit bouton est le destructif. CE QUE CETTE LIGNE FAIT, ET CE QU ELLE NE FAIT PAS. Elle ne choisit aucune taille : elle ramene au plancher DEJA VALIDE PAR UNE MAIN ce qui etait passe dessous sans que personne le decide. Elle ne monte rien a 40 ni a 44 -- ces seuils viennent d un guide, et la mesure de Frederick les a explicitement refuses. ⚠️ `min-height` ET PAS UN PADDING : le padding est justement ce que les styles en ligne ecrasent. `min-height` n est pose nulle part en ligne, donc il tient. `box-sizing:border-box` est global (ligne 46) : la valeur est la hauteur RENDUE, bordures comprises. Gardee par `scripts/essai-plancher-au-doigt.js`, qui MESURE le rendu de vraies pages -- il ne relit pas cette ligne. ================================================================================================ */ button{ margin-top:10px; background:var(--amber); color:#1a1300; border:none; padding:10px 14px; border-radius:6px; font-weight:700; font-size:13.5px; cursor:pointer; letter-spacing:.01em; transition:filter .15s; min-height:26px; /* le plancher au doigt -- voir le pave ci-dessus */ } button.full{ width:100%; } button:hover{filter:brightness(1.08);} button:active{filter:brightness(0.92);} button.secondary{ background:transparent; color:var(--grey-text); border:1px solid var(--hairline); } /* Etat "arme" d'une confirmation EN PLACE (questionnaire equipement, bouton "Aucun de ceux-la") -- remplace un confirm() natif qui s'ouvrait loin du bouton clique. Doit se distinguer nettement de l'etat au repos, sinon le second clic part sans que l'utilisateur ait vu qu'on lui demandait quelque chose. */ /* Barre de filtres de la liste des taches de maintenance (statut / categorie / recherche). */ .tk-filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; } .tk-filter-bar select, .tk-filter-bar input[type="search"]{ margin:0; padding:6px 10px; font-size:13px; width:auto; min-width:150px; } .tk-filter-bar input[type="search"]{ flex:1 1 200px; } .tk-filter-count{ font-size:12px; color:var(--grey-text); margin-left:auto; white-space:nowrap; } button.secondary.confirming{ color:var(--amber); border-color:var(--amber); background:rgba(255,178,0,.10); font-weight:600; } button.danger{ background:transparent; color:#ff8f8f; border:1px solid rgba(255,92,92,0.4); padding:5px 10px; font-size:11.5px; margin:0; } button:disabled{ opacity:.5; cursor:not-allowed; } .results-empty{ color:var(--grey-text); font-size:13.5px; padding:30px 10px; text-align:center; border:1px dashed var(--hairline); border-radius:8px; } .ad-card{ border:1px solid var(--hairline); border-radius:8px; padding:10px 14px; margin-bottom:8px; background:#0f1114; } .ad-card[open]{ padding-bottom:14px; } /* Carte-resultat repliee par defaut (voir aircraft.html) -- une seule ligne compacte tant que l'admin/le client n'a pas besoin du detail. */ /* flex-wrap MESURE, PAS DECORATIF (8 septembre 2026). A 360 px, la ligne repliee ne tient pas : ▸ + le numero d AD + la pastille de statut font 274 px dans une carte large de 232. La pastille partait donc a x=240 et finissait a 408 -- 48 px HORS DE L ECRAN. Et comme .panel porte overflow-x:auto sous 760 px, le panneau ABSORBAIT : la page ne defilait pas, aucune barre ne s affichait, rien a l ecran ne disait qu il manquait du texte. Un TEA lisait « Verification requi » sans savoir qu il lui manquait un mot. 226 pastilles etaient dans ce cas. Sans wrap, aucun min-width:0 n y peut rien : white-space:nowrap fixe la taille min-contenu de la pastille a sa largeur pleine, donc flex ne peut pas la retrecir. On la laisse DESCENDRE A LA LIGNE. Le placement en lignes se fait sur la taille de base (pastille = 168 px), donc a 1280 px tout tient sur une ligne comme avant : le rendu large ne change pas. */ .ad-summary{ display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; padding:4px 0; user-select:none; flex-wrap:wrap; } .ad-summary::-webkit-details-marker{ display:none; } .ad-summary::before{ content:'▸'; color:var(--amber); font-size:11px; flex-shrink:0; transition:transform .1s; } .ad-card[open] > .ad-summary::before{ content:'▾'; } .ad-summary .ad-id{ flex-shrink:0; } .ad-summary-title{ flex:1; min-width:0; font-size:12.5px; color:var(--grey-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ad-card-body{ padding-top:8px; margin-top:6px; border-top:1px solid var(--hairline); } .ad-card.applicable{border-left:3px solid var(--red);} .ad-card.non_applicable{border-left:3px solid var(--blue);} .ad-card.verification_requise{border-left:3px solid var(--amber);} .ad-card.fermee{border-left:3px solid var(--green);} .ad-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; } .ad-id{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--white-text); font-weight:600; } /* white-space:normal ET NON nowrap -- ET CE N EST PAS « laisser la pastille se casser » (8 sept. 2026). `normal` ne FORCE aucun retour a la ligne : une boite qui s ajuste a son contenu reste sur une ligne tant qu elle tient. Le seul cas ou il change quelque chose est celui ou la pastille NE TIENT PAS -- et la, l ancien nowrap ne la faisait pas tenir non plus : il la faisait DEPASSER, en silence, absorbee par le panneau. Retourner a la ligne montre le mot ; nowrap le supprimait de l ecran. max-width:100% ferme le meme trou pour les deux emplois BLOC de cette classe (index.html et le bloc de confiance d aircraft.html), ou le texte vient de la base et n a pas de longueur connue. overflow-wrap:break-word, et non `anywhere` : `anywhere` abaisserait la taille min-contenu a un caractere et flex ecraserait la pastille en colonne de lettres. */ .status-pill{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:20px; white-space:normal; max-width:100%; overflow-wrap:break-word; } .status-pill.applicable{background:rgba(255,92,92,0.14);color:#ff8f8f;} .status-pill.non_applicable{background:rgba(111,168,255,0.14);color:#a9c6ff;} .status-pill.verification_requise{background:rgba(255,178,0,0.14);color:var(--amber);} .status-pill.fermee{background:rgba(79,214,138,0.14);color:#7be3ac;} .ad-title{font-size:14px;margin:8px 0 4px;color:var(--white-text);font-weight:600;} .ad-meta{font-size:11.5px;color:var(--grey-text);font-family:'IBM Plex Mono',monospace;margin-bottom:10px;} .reasoning{ font-size:12.5px; color:var(--grey-text); line-height:1.6; padding-top:8px; margin-top:4px; } .reasoning div{margin-bottom:3px;} .reasoning-details{ margin-top:2px; } .reasoning-details summary{ cursor:pointer; font-size:11.5px; color:var(--grey-text); font-family:'IBM Plex Mono',monospace; list-style:none; user-select:none; padding-top:8px; border-top:1px solid var(--hairline); } .reasoning-details summary::-webkit-details-marker{ display:none; } .reasoning-details summary::before{ content:'▸ '; color:var(--amber); } .reasoning-details[open] summary::before{ content:'▾ '; } .reasoning-details summary:hover{ color:var(--white-text); } .legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--grey-text); margin-bottom:16px; font-family:'IBM Plex Mono',monospace; } .legend span{display:flex;align-items:center;gap:6px;} .dot{width:8px;height:8px;border-radius:50%;display:inline-block;} .dot.applicable{background:var(--red);} .dot.verification_requise{background:var(--amber);} .dot.fermee{background:var(--green);} .dot.non_applicable{background:var(--blue);} .status-line{ font-size:12px; color:var(--grey-text); font-family:'IBM Plex Mono',monospace; margin-top:12px; min-height:16px; } .status-line.error{ color:#ff8f8f; } /* AD applicable ET recurrente (compliance.recurring) -- releve le seuil d'attention au-dela du simple statut : c'est une obligation qui revient a chaque echeance, pas une action ponctuelle qu'on coche et qu'on oublie. */ .ad-card.recurring{ border-left-width:5px; box-shadow:0 0 0 1px var(--amber-dim) inset, 0 0 14px -4px rgba(255,178,0,0.35); } .recurring-badge{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:20px; white-space:nowrap; background:var(--amber); color:#1a1400; font-weight:700; } .pdf-link{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--grey-text); border:1px solid var(--hairline); border-radius:6px; padding:3px 9px; text-decoration:none; white-space:nowrap; } .pdf-link:hover{ color:var(--white-text); border-color:var(--grey-text); } .filter-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; } .filter-chip{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.03em; padding:6px 12px; border-radius:20px; border:1px solid var(--hairline); background:transparent; color:var(--grey-text); cursor:pointer; } .filter-chip:hover{ color:var(--white-text); border-color:var(--grey-text); } .filter-chip.active{ background:var(--white-text); color:#0b0c0e; border-color:var(--white-text); font-weight:600; } .filter-chip.active.recurring-active{ background:var(--amber); border-color:var(--amber); color:#1a1400; } .category-tag{ background:rgba(111,168,255,0.10); color:#a9c6ff; border-color:rgba(111,168,255,0.3); } /* ================================================================================================ LA BANDE DE NAVIGATION SE RESERVE SA HAUTEUR -- ET ELLE EST OPAQUE. ================================================================================================ LE DEFAUT, MESURE (constat E4, 24 aout 2026, 22 h 31). Frederick ouvre le tableau de bord sur son iPhone : le titre de page, un numero de bon de travail et une bande jaune pleine largeur passent SOUS les pastilles « ← Retour / ☰ Menu / EN / Déconnexion », et les deux textes se melangent. `scripts/essai-ecran-telephone.js` a mesure ceci, avant correctif : 360 / 390 / 402 px : la barre occupe y 16 -> 55 ; le logo d'en-tete commence a y 43. 12 px de chevauchement. 1280 px : 13 px. LE MEME DEFAUT, A TOUTES LES LARGEURS. CETTE DERNIERE LIGNE EST LA SURPRISE, et elle a change le correctif. Je croyais tenir un defaut d'ecran etroit -- l'en-tete est centre a 980 px, donc sur un grand ecran il reste de la place dans les marges. Faux : `.nav-menu` est a `left:20px` et l'en-tete a `padding-left:20px`, si bien que le bouton « ← Retour » couvre le logo DEPUIS TOUJOURS, sur les vingt-huit pages, quelle que soit la largeur. Une correction sous media query aurait laisse le defaut en place sur l'ecran ou je l'aurais declare corrige. LA CAUSE. `position:fixed` retire l'element du flux. PERSONNE ne lui reserve sa hauteur : le contenu commence a y=0 et la barre se pose par-dessus. Ce n'est pas un reglage a ajuster, c'est une hauteur qui n'a jamais ete demandee a personne. POURQUOI ON GARDE `position:fixed` PLUTOT QUE DE LA RENDRE STATIQUE SOUS UNE CERTAINE LARGEUR. C'etait l'autre option, et elle supprimait le chevauchement par construction, sans constante magique. Elle coute trop cher : ces quatre pastilles sont la SEULE navigation du portail sur vingt-huit pages, et le tableau de bord de Skynova fait dix-huit aeronefs de long. Les faire disparaitre au premier glissement du doigt, c'est obliger a remonter en haut de page pour changer d'ecran -- on echangerait un defaut d'affichage contre un defaut d'usage, sur le telephone, c'est-a-dire exactement la ou le premier faisait mal. DEUX REGLES, PAS UNE, PARCE QUE LA CAPTURE MONTRE DEUX MOMENTS : 1. LA HAUTEUR EST RESERVEE -- rien ne commence plus sous la barre, page en haut. 2. LA BANDE EST OPAQUE -- une fois qu'on fait defiler, du contenu passe FORCEMENT sous une barre fixe. C'est supportable si elle le CACHE ; c'est illisible si elle le laisse transparaitre, et c'est litteralement ce que montre la capture (la bande jaune « Voir les 2 bon(s) de travail → » coupee en deux par les pastilles). Mesure : avant correctif, un balayage de la bande rendait `div.sub « Vue d'ensemble de tous tes aéronefs... »` aux trois largeurs. `:has()` PLUTOT QU'UNE CLASSE POSEE EN JAVASCRIPT. La barre n'existe que sur les pages qui chargent nav-menu.js ; login.html et la vitrine n'en ont pas, et leur imposer une bande vide de 60 px serait un defaut invente. La regle est donc portee par le CSS, jamais par un booleen -- meme raison qu'ecrit deja `#fl-mode` dans dashboard.html : « une media query ne peut pas se desynchroniser d'un booleen ». Si `:has()` venait a ne pas s'appliquer, on retombe sur le comportement d'aujourd'hui, jamais sur pire -- et l'essai d'ecran le dirait tout de suite. LA HAUTEUR EST MESUREE, PAS DEVINEE : bas de barre a 55 px, plus 5 px de respiration. Elle n'est ecrite qu'ICI, et `essai-ecran-telephone.js` verifie le RESULTAT (aucun croisement de rectangles) plutot que la constante -- le jour ou une pastille grandit, c'est l'essai qui le dit, pas un client. */ :root{ /* Une declaration PAR LIGNE, et ce n'est pas une question de gout : verifier-pages.js reconnait une variable CSS a `^\s*--nom\s*:`. Ecrite sur la meme ligne que `:root{`, elle passait pour inexistante et le controle refusait le fichier -- il m'a attrape en trois secondes, ce qui est exactement son travail. */ --barre-nav-h:60px; } body:has(> .nav-menu){ padding-top:var(--barre-nav-h); } body:has(> .nav-menu)::before{ content:''; position:fixed; top:0; left:0; right:0; height:var(--barre-nav-h); /* Opaque, et de la meme couleur que le haut du degrade du corps -- une bande qui se voit serait une barre d'outils qu'on n'a pas dessinee. `pointer-events:none` : elle cache, elle n'intercepte pas ; sans ca elle avalerait le premier clic destine a la page. */ background:#1c1f24; border-bottom:1px solid var(--hairline); z-index:9; pointer-events:none; } /* Le bandeau rivete EST le bord haut de cette bande : il monte avec elle plutot que d'etre pousse 60 px plus bas, ou il ne borderait plus rien. */ body:has(> .nav-menu) > .rivet-strip{ position:fixed; top:0; left:0; right:0; z-index:10; } /* ET ON REND UNE PARTIE DU DECALAGE. Sans cette ligne, l'en-tete descendrait de 50 px sur les vingt-huit pages -- un deplacement que personne n'a demande, pour corriger un chevauchement de 12. Avec elle, le contenu passe de y=42 a y=70 : il degage la barre, et il bouge le moins possible. */ body:has(> .nav-menu) > header{ padding-top:10px; } .logout-btn{ position:fixed; top:16px; right:20px; z-index:10; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.03em; padding:6px 12px; border-radius:20px; border:1px solid var(--hairline); background:var(--panel-bg); color:var(--grey-text); cursor:pointer; text-decoration:none; } .logout-btn:hover{ color:var(--white-text); border-color:var(--grey-text); } /* Menu deroulant en haut a gauche (Mon compte / Abonnement / Aide / Admin) -- demande explicite : "met les en menu deroulant en haut a gauche" -- remplace la pile de liens ambre qui encombrait l'en-tete de index.html. Meme famille visuelle que .logout-btn (position fixe, coin de la fenetre), miroir a gauche plutot qu'a droite. */ .nav-menu{ position:fixed; top:16px; left:20px; z-index:10; } .nav-menu-btn{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.03em; padding:6px 12px; border-radius:20px; border:1px solid var(--hairline); background:var(--panel-bg); color:var(--grey-text); cursor:pointer; } .nav-menu-btn:hover{ color:var(--white-text); border-color:var(--grey-text); } .nav-menu-panel{ position:absolute; top:calc(100% + 6px); left:0; min-width:230px; /* `--nav-menu-panel-bg`, PAS `--panel-face` (voir le commentaire de sa declaration, en tete de fichier) : ce panneau est le seul a se dessiner par-dessus le coin le plus clair du degrade de `body`, et c'est le seul qui avait besoin d'un fond plus pale. */ background:var(--nav-menu-panel-bg); border:1px solid var(--hairline); border-radius:8px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,0.4); /* Le panneau grandit avec le nombre d'aeronefs (une entree par appareil) : sans plafond, il depassait simplement le bas de la fenetre et les dernieres entrees -- Administration comprise -- devenaient inatteignables. Il defile desormais a l'interieur de lui-meme. overscroll-behavior evite que la page defile derriere une fois le bas du menu atteint. */ max-height:calc(100vh - 90px); overflow-y:auto; overscroll-behavior:contain; max-width:calc(100vw - 40px); } .nav-menu-panel a{ display:block; padding:7px 10px; border-radius:5px; text-decoration:none; color:var(--amber); font-size:12.5px; white-space:nowrap; } /* Sections repliables (voir restoreFolds dans nav-menu.js) : le chevron indique l'etat, et summary garde exactement l'allure d'une etiquette de section pour ne pas creer deux styles de titre differents dans le meme panneau. */ .nav-menu-panel details.nav-menu-fold > summary{ cursor:pointer; list-style:none; user-select:none; } .nav-menu-panel details.nav-menu-fold > summary::-webkit-details-marker{ display:none; } .nav-menu-panel details.nav-menu-fold > summary::after{ content:' ▸'; } .nav-menu-panel details.nav-menu-fold[open] > summary::after{ content:' ▾'; } .nav-menu-panel details.nav-menu-fold > summary:hover{ color:var(--amber); } /* Sur ecran etroit, les libelles longs ("+ Ajouter une AD (extraction IA depuis un PDF) →") depassaient en largeur : on les laisse passer a la ligne plutot que de forcer un defilement horizontal, plus penible au doigt. */ @media (max-width:600px){ .nav-menu-panel a{ white-space:normal; } } /* Deux colonnes quand le panneau ne tient pas en hauteur (voir ajusterPanneau dans nav-menu.js -- la classe est posee apres mesure, jamais par media query). Le flux multi- colonnes repartit les entrees tout seul ; break-inside empeche qu'une section soit coupee en deux entre les colonnes. */ .nav-menu-panel.two-col{ min-width:470px; column-count:2; column-gap:16px; } .nav-menu-panel.two-col > *{ break-inside:avoid; } .nav-menu-panel.two-col hr{ break-after:avoid; } .nav-menu-panel a:hover{ background:rgba(255,178,0,0.08); } .nav-menu-panel hr{ border:none; border-top:1px solid var(--hairline); margin:6px 2px; } /* L'EN-TETE DE GROUPE, PLUS EN EVIDENCE QUE SES ITEMS -- tache FQ3e (26 aout 2026) : "il faut mettre les groupes de sous-menu dans le menu plus en evidence". Mesure avant correctif : cette classe est desormais posee UNIQUEMENT sur le de chaque repli (public/nav-menu.js, regrouperEnFamilles() et le bloc Administration) -- plus jamais sur une etiquette de section a plat -- et elle rendait un texte gris 10px SANS graisse, plus PETIT et plus PALE que les liens ambre 12.5px qu'il coiffe : le titre du groupe se voyait donc MOINS que son propre contenu, l'inverse de ce qu'un en-tete doit faire. Corrige par trois leviers indissociables : une graisse (700, les liens n'en portent aucune), une teinte plus claire (--white-text plutot que --grey-text) et un fond distinct (rgba blanc a 6%, que .nav-menu-panel a n'a jamais au repos) -- scripts/essai-nav-menu-contraste.js compare les trois avec les items pour que la mesure porte sur le VRAI ecart, pas sur une seule propriete qui suffirait a elle seule. */ .nav-menu-panel .nav-menu-section-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--white-text); background:rgba(255,255,255,0.06); border-radius:5px; padding:7px 10px; margin:3px 0 2px; } footer{ max-width:var(--largeur-page); margin:30px auto 0; padding:0 20px; font-size:12px; color:var(--grey-text); line-height:1.6; } footer a{ color:var(--amber); } /* Liste d'aeronefs ------------------------------------------------------------------------------------------ UNE GRILLE `1fr auto`, EXACTEMENT COMME `.camp-item` DE « PAR OU COMMENCER ». Ce n'est pas un emprunt d'apparence : c'est le seul agencement qui rende le groupement INDEPENDANT de la largeur. La version d'avant etait un `flex` a deux blocs ou le geste vivait au bout des liens ; MESURE LE 22 AOUT 2026 A 1280 px, avec les vrais libelles francais : les quatre liens font 759 px pour 868 px disponibles, et l'amas de gestes (137 px) passait a la ligne -- il atterrissait alors SOUS le premier lien, a 722 px a gauche du dernier, c'est-a-dire range parmi les liens, ce que cette separation existe pour empecher. Le repli dependait donc de la longueur des libelles : une traduction plus longue aurait defait la mise en page en silence. Avec deux colonnes, le geste a SA colonne, et les liens se replient dans la leur. */ .aircraft-row{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--hairline); border-radius:8px; background:#0f1114; margin-bottom:10px; } .aircraft-row .reg{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:14px; color:var(--white-text); } .aircraft-row .model{ font-size:12px; color:var(--grey-text); margin-top:2px; } .aircraft-row .links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:9px; } .aircraft-row .links a{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-decoration:none; color:var(--amber); border:1px solid var(--amber-dim); padding:6px 10px; border-radius:5px; white-space:nowrap; } .aircraft-row .links a:hover{ background:rgba(255,178,0,0.08); } /* ================================================================================================ UN LIEN QUI OUVRE UN ECRAN ET UN BOUTON QUI ARCHIVE UN AERONEF NE DOIVENT PAS SE RESSEMBLER. ================================================================================================ FREDERICK, 22 AOUT 2026 : « il faut que les boutons (leur utilite soit plus claire) ». Sur sa capture, la carte portait SIX gestes de meme apparence : quatre qui MENENT AILLEURS (Verifier les AD, Suivi, Documents, Complements) et deux qui CHANGENT L ETAT de l appareil (Desactiver, Retirer). Rien ne disait lequel etait lequel -- et le plus consequent des six, celui qui effacait la ligne, etait juste a cote de ceux qui ne font que naviguer. CE N EST PAS UNE QUESTION DE COULEUR, C EST UNE QUESTION DE NATURE. Recolorer le bouton l aurait rendu plus voyant sans le rendre plus lisible : un bouton rouge reste un bouton range parmi des liens. On separe donc les deux familles, et la separation se MESURE (voir scripts/essai-archiver-aeronef.js, section 2) : - la NATURE : les quatre navigations sont des avec une adresse ; le geste est un