:root{
  --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;
}
*{box-sizing:border-box;}
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);
}
header{ padding:32px 20px 20px; max-width:980px; 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. */
.aircraft-switcher{
  margin-top:10px; background:var(--panel-face); color:var(--white-text); border:1px solid var(--hairline);
  border-radius:6px; padding:7px 10px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; max-width:260px;
}
.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). */
.site-footer{ display:flex; align-items:center; gap:10px; }
.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); }
h1{ font-size:clamp(22px,4vw,32px); margin:0 0 8px; font-weight:800; letter-spacing:-0.01em; }
.sub{ color:var(--grey-text); font-size:14.5px; max-width:640px; line-height:1.55; }
.warning-banner{
  max-width:980px; 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:980px; 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; }
.fiche-panel-info{ flex:2; min-width:280px; }
.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:980px; margin:20px auto 0; padding:0 20px; }

.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);
}

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;
}
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. */
.ad-summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  padding:4px 0; user-select:none;
}
.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; }
.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:nowrap;
}
.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); }

.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;
  background:var(--panel-face); 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; }
.nav-menu-panel .nav-menu-section-label{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--grey-text); padding:6px 10px 2px; }

footer{ max-width:980px; 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 */
.aircraft-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  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; }
.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); }

/* Boutons/liens colores selon le statut de la page ciblee (AD ou Tracking) -- demande
   explicite : "peux-tu mettre les boutons AD et tracking en couleur variable selon le statut
   de la page dediee ?". Vocabulaire unifie vert/jaune/rouge (voir aircraftContext.js
   getAdStatusSummary : attention->rouge, action->jaune, clear->vert -- meme mapping que le
   module tracking). Un point de couleur avant le texte, pas juste la bordure -- plus visible
   au premier coup d'oeil sur une liste de plusieurs aeronefs. */
.status-link{ position:relative; padding-left:22px !important; }
.status-link::before{
  content:''; position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--grey-text);
}
.status-link.sl-vert::before{ background:var(--green); }
.status-link.sl-jaune::before{ background:var(--amber); }
.status-link.sl-rouge::before{ background:var(--red); }
.status-link.sl-donnee_manquante::before{ background:var(--grey-text); }

/* Listes editables (complements) */
.item-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border:1px solid var(--hairline); border-radius:6px; background:#0f1114; margin-bottom:8px;
  font-size:12.5px;
}
.item-row .item-main b{ color:var(--white-text); }
.item-row .item-sub{ color:var(--grey-text); font-size:11px; margin-top:2px; }
.item-row .item-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.checkbox-inline{ display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--grey-text); }
.checkbox-inline input{ accent-color: var(--amber); }

/* Renversement de decision (outil d'audit, voir aircraft.html) */
.ad-card.overridden{ border-left:3px solid var(--amber); }
.override-banner{
  margin-top:10px; padding:8px 10px; border:1px solid var(--amber); border-radius:6px;
  background:#15130a; font-size:12px; color:var(--white-text);
}
.override-reason{ margin-top:4px; color:var(--grey-text); font-style:italic; }
.override-meta{ margin-top:4px; color:var(--grey-text); font-size:11px; }
.override-form{ margin-top:8px; padding:10px; border:1px dashed var(--hairline); border-radius:6px; }
.override-form select{ width:100%; }

/* Questionnaire equipement groupe par categorie (voir equipment-questionnaire.html) */
.item-group{ margin-bottom:8px; }
.item-group .item-group-header{ border-color:var(--amber); background:#15130a; margin-bottom:6px; }
.item-group .item-group-detail .item-row{ margin-bottom:6px; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.65); display:flex; align-items:center;
  justify-content:center; z-index:1000; padding:20px;
}
.modal-box{
  background:linear-gradient(180deg, var(--panel-face) 0%, var(--panel-face-2) 100%);
  border:1px solid var(--hairline); border-radius:10px; padding:24px; max-width:540px; width:100%;
  max-height:82vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.modal-box h2{
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber); margin:0 0 8px;
}

/* Point 11 -- "le popup sur la page des AD, peut-on faire defiler la liste mais en gardant les
   boutons toujours visibles ?" -- par defaut .modal-box defile EN ENTIER (overflow-y:auto sur la
   boite complete), donc une longue liste pousse les boutons hors ecran. .modal-box-flex isole
   UNE zone interne comme seule region defilante (.modal-scroll-area), le reste (titre, boutons)
   reste fixe dans la fenetre modale. */
.modal-box-flex{ display:flex; flex-direction:column; overflow-y:hidden; }
.modal-box-flex .modal-scroll-area{ overflow-y:auto; flex:1 1 auto; min-height:0; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.form-grid .span2{ grid-column:1 / -1; }

.back-link{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--grey-text);
  text-decoration:none; margin-bottom:6px;
}
.back-link:hover{ color:var(--amber); }