/* LARDON — feuille de style
 *
 * V0.3.65 : aplatissement. Les blocs répétés d'un même sélecteur ont été fusionnés
 * en une définition unique, et les !important qui ne servaient plus ont été retirés.
 * La cascade a été vérifiée déclaration par déclaration : 917 avant, 917 après,
 * aucune valeur modifiée. Le rendu est identique à la V0.3.64.
 *
 * Les 152 !important restants sont nécessaires : ils arbitrent soit une rivalité
 * réelle entre deux règles, soit un style inline posé par app.js.
 *
 * Règle de tenue : un sélecteur, un bloc. Pour changer un comportement, modifier
 * la déclaration existante — ne pas rouvrir le sélecteur plus bas dans le fichier.
 *
 * V0.5.4 : zones sûres iOS. Tout élément d'interface collé à un bord ajoute
 * l'inset exposé par le système — env(safe-area-inset-top / bottom / left /
 * right) — à sa valeur d'origine, via calc(). Sans cela, la barre de recherche
 * passe sous l'encoche ou la Dynamic Island, et les panneaux bas sous la barre
 * d'accueil. Les valeurs historiques n'ont pas changé : elles sont seulement
 * décalées. Sur un appareil sans zone réservée, l'inset vaut 0 et le rendu est
 * identique aux versions précédentes.
 */

:root{
  --bg: #071523;
  --panel: #0d2033;
  --text: #f4f7fa;
  --muted: #9eacb9;
  --green: #63d33d;
  --orange: #ffad3d;
  --red: #ff5b57;
}
*{
  box-sizing: border-box;
}
/* Témoin invisible : sa hauteur vaut la zone réservée par le système en bas
   de l'écran (barre d'accueil iPhone, navigation gestuelle Android). app.js
   la mesure pour placer les panneaux bas ; ne pas supprimer. */
#safeProbe{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 0;
  height: env(safe-area-inset-bottom,0px);
  visibility: hidden;
  pointer-events: none;
}
html,body{
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  background: var(--bg);
  color: var(--text);
}
#map{
  position: absolute;
  inset: 0;
}
.topbar{
  position: absolute;
  z-index: 1000;
  top: calc(env(safe-area-inset-top,0px) + 48px);
  left: calc(env(safe-area-inset-left,0px) + 16px);
  right: calc(env(safe-area-inset-right,0px) + 16px);
  display: flex;
  gap: 12px;
  align-items: center;
}
.search{
  height: 52px;
  flex: 1;
  max-width: 760px;
  margin: auto;
  background: rgba(7,21,35,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  color: var(--text);
  padding: 0 18px;
  font-size: 17px;
  outline: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.btn{
  height: 52px;
  width: 52px;
  border: 0;
  border-radius: 15px;
  background: rgba(7,21,35,.92);
  color: white;
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.controls{
  position: absolute;
  z-index: 1000;
  left: 16px;
  top: calc(env(safe-area-inset-top,0px) + 122px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.controls .btn{
  width: 48px;
  height: 48px;
}
.panel{
  position: absolute;
  z-index: 1000;
  left: calc(env(safe-area-inset-left,0px) + 10px);
  right: calc(env(safe-area-inset-right,0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom,0px) + 10px);
  background: rgba(7,21,35,.96);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 -10px 35px rgba(0,0,0,.25);
}
.cards{
  display: grid;
  grid-template-columns: 1.25fr repeat(5,1fr);
  gap: 10px;
}
.card{
  background: rgba(18,40,61,.92);
  border-radius: 12px;
  padding: 12px;
  min-height: 100px;
}
.label{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.value{
  font-size: 25px;
  font-weight: 700;
  margin-top: 6px;
}
.sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.status{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
}
.dot{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #06200b;
}
.footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px 2px;
  color: var(--muted);
  font-size: 12px;
}
.profile select{
  background: transparent;
  color: white;
  border: 0;
  font-size: 14px;
  font-weight: 700;
}
.range{
  width: 150px;
  vertical-align: middle;
}
.drawer{
  position: absolute;
  z-index: 1200;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(360px,88vw);
  background: rgba(7,21,35,.98);
  box-shadow: 14px 0 35px rgba(0,0,0,.35);
  transform: translateX(-105%);
  transition: transform .22s ease;
  padding: 18px;
  overflow: auto;
}
.drawer.open{
  transform: translateX(0);
}
.drawer h2{
  margin: 8px 0 20px;
  font-size: 22px;
}
.drawer-section{
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.drawer label{
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.drawer button{
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #12283d;
  color: #fff;
  padding: 0 12px;
  font-size: 15px;
  margin-bottom: 8px;
}
.drawer input[type=range]{
  width: 100%;
}
.choice{
  display: flex !important;
  align-items: center;
  gap: 10px;
  text-transform: none;
  color: #fff !important;
  font-size: 15px !important;
  margin: 10px 0 !important;
}
.choice input{
  width: 18px;
  height: 18px;
}
.close-drawer{
  position: absolute;
  right: 14px;
  top: 12px;
  width: 40px;
  height: 40px;
  font-size: 22px !important;
}
.loading{
  position: absolute;
  z-index: 1100;
  left: 50%;
  top: calc(env(safe-area-inset-top,0px) + 80px);
  transform: translateX(-50%);
  background: rgba(7,21,35,.94);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  display: none;
}
.lz-label{
  background: #071523;
  color: #fff;
  padding: 4px 7px;
  border-radius: 6px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.2);
}
@media(max-width:900px){
  .cards{
    grid-template-columns: 1.2fr repeat(2,1fr);
  }
  .card:nth-child(n+4){
    display: none;
  }
  .value{
    font-size: 21px;
  }
}
.topbar .btn, .controls .btn{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.icon-menu{
  display: block;
  transform: translateY(-1px);
  font-size: 24px;
  line-height: 1;
}
.icon-target{
  display: block;
  font-size: 25px;
  line-height: 1;
}
.edit-btn.active{
  outline: 2px solid #63d33d;
}
.rotate-handle{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #071523;
  border: 2px solid white;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.sizeInputs{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sizeInputs input{
  width: 58px;
  background: #12283d;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
  color: #fff;
  padding: 5px 6px;
  font-size: 13px;
  text-align: center;
}
.drawer{
  display: none;
  position: absolute;
  z-index: 1200;
  top: calc(env(safe-area-inset-top,0px) + 108px);
  left: 16px;
  width: 290px;
  background: rgba(7,21,35,.98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.drawer h3{
  margin: 0 0 12px;
  font-size: 18px;
}
.drawer label{
  display: block;
  font-size: 12px;
  color: #9eacb9;
  margin: 10px 0 6px;
}
.drawer select,.drawer button{
  width: 100%;
  padding: 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.15);
}
.drawer select{
  background: #12283d;
  color: white;
}
.drawer button{
  margin-top: 8px;
  background: white;
  color: #071523;
  font-weight: 800;
}
.drawer-good{
  display: none;
  position: absolute;
  z-index: 1300;
  top: 108px;
  left: 16px;
  width: 300px;
  background: rgba(7,21,35,.98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.drawer-good.open{
  display: block;
}
.drawer-good label{
  display: block;
  color: #9eacb9;
  font-size: 12px;
  margin: 10px 0 6px;
}
.drawer-good select,.drawer-good button{
  width: 100%;
  padding: 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.15);
}
.drawer-good select{
  background: #12283d;
  color: white;
}
.drawer-good button{
  margin-top: 8px;
  background: white;
  color: #071523;
  font-weight: 800;
}
.drawer-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 800;
}
.drawer-title #closeDrawer{
  width: 38px;
  margin: 0;
  padding: 5px;
  font-size: 22px;
}
.edit-tools button{
  height: 38px;
  min-width: 52px;
  border: 0;
  border-radius: 9px;
  font-weight: 800;
}
.edit-tools input[type=range]{
  width: 210px;
  min-width: 0;
  flex: 1 1 90px;
}
.edit-tools button{
  flex: 0 0 auto;
}
.edit-tools input[type=number]{
  width: 58px;
  height: 38px;
  background: #12283d;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
}
.axis-arrow{
  width: 54px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 900;
  color: white;
  line-height: .85;
  text-shadow: -2px -2px 3px #000,2px -2px 3px #000,-2px 2px 3px #000,2px 2px 3px #000,0 3px 5px #000;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.axis-arrow .av{
  font-size: 12px;
  letter-spacing: .05em;
  margin-top: -2px;
  background: rgba(0,0,0,.55);
  padding: 2px 4px;
  border-radius: 4px;
}
.profile-box{
  position: absolute;
  z-index: 999;
  left: calc(env(safe-area-inset-left,0px) + 10px);
  right: calc(env(safe-area-inset-right,0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom,0px) + 148px);
  height: 132px;
  background: rgba(7,21,35,.97);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 8px 12px;
  box-shadow: 0 -8px 25px rgba(0,0,0,.2);
}
.profile-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 2px;
}
.profile-head b{
  font-size: 13px;
}
.profile-meta{
  color: #9eacb9;
  font-size: 10px;
}
#profileCanvas{
  display: block;
  width: 100%;
  height: 98px;
}
.validate-btn{
  position: absolute;
  z-index: 1001;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom,0px) + 350px) !important;
  display: none;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: rgba(7,21,35,.96);
  color: white;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.edit-tools{
  display: none;
  position: absolute;
  z-index: 1250;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom,0px) + 288px) !important;
  align-items: center;
  gap: 8px;
  background: rgba(7,21,35,.97);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  /* Sur téléphone étroit la barre dépassait des deux côtés : elle est bornée
     à la largeur utile et c'est le curseur qui se comprime. */
  max-width: calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 16px);
}
.aircraft-symbol img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.9));
}
.coord-box .coord-label{
  font-size: 10px;
  color: #9eacb9;
  font-weight: 600;
  text-transform: uppercase;
}
/* ===== V0.3 : analyse LZ + panneaux repliables ===== */
.panel-togglebar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  margin: -2px 0 7px;
  padding: 0 3px;
  cursor: pointer;
}
.panel-togglebar .left{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
}
.panel-togglebar .mini-state{
  font-size: 11px;
  color: #9eacb9;
  font-weight: 700;
}
.chev{
  font-size: 18px;
  color: #fff;
  transition: transform .18s ease;
}
.panel.collapsed .cards,.panel.collapsed .footer{
  display: none;
}
.analysis-box{
  position: absolute;
  z-index: 1000;
  right: calc(env(safe-area-inset-right,0px) + 16px);
  top: calc(env(safe-area-inset-top,0px) + 236px);
  width: min(360px,calc(100vw - 32px));
  background: rgba(7,21,35,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  overflow: hidden;
}
.analysis-head{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}
.analysis-light{
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #9eacb9;
  flex: 0 0 auto;
}
.analysis-head .title{
  flex: 1;
}
.analysis-head .summary{
  font-size: 11px;
  color: #c7d1da;
  font-weight: 700;
  text-align: right;
}
.analysis-body{
  padding: 0 12px 11px;
  font-size: 12px;
  line-height: 1.45;
}
.analysis-reason{
  padding: 6px 8px;
  margin-top: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.07);
}
.analysis-note{
  margin-top: 7px;
  color: #9eacb9;
  font-size: 10px;
}
.analysis-badge{
  font-weight: 850;
}
.analysis-box.green .analysis-light{
  background: #63d33d;
}
.analysis-box.orange .analysis-light{
  background: #ffad3d;
}
.analysis-box.red .analysis-light{
  background: #ff5b57;
}
body.panel-collapsed .profile-box{
  bottom: calc(env(safe-area-inset-bottom,0px) + 62px);
}
body.panel-collapsed .validate-btn{
  bottom: calc(env(safe-area-inset-bottom,0px) + 264px) !important;
}
body.panel-collapsed .edit-tools{
  bottom: calc(env(safe-area-inset-bottom,0px) + 202px) !important;
}
@media(max-width:900px){
  .analysis-box{
    right: calc(env(safe-area-inset-right,0px) + 10px);
    top: calc(env(safe-area-inset-top,0px) + 236px);
    width: min(330px,calc(100vw - 20px));
  }
}
/* V0.3.1 UI */
.edit-btn{
  position: absolute;
  z-index: 1000;
  right: auto !important;
  top: calc(env(safe-area-inset-top,0px) + 360px) !important;
  height: 58px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 14px !important;
  background: rgba(7,21,35,.94);
  color: white;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  left: 75px !important;
  width: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
}
.edit-btn::after{
  content: "DZ";
  font-size: 16px;
  font-weight: 900;
}
.profile-title-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.profile-box.collapsed-profile{
  height: auto !important;
  padding-bottom: 9px;
}
.profile-box.collapsed-profile canvas,.profile-box.collapsed-profile .profile-meta,.profile-box.collapsed-profile .profile-label,.profile-box.collapsed-profile .profile-side{
  display: none !important;
}
/* ===== V0.3.2 corrections UI iPad ===== */
/* DZ appartient réellement à la colonne + / - / N : même boîte et même espacement */
.controls .edit-btn{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  line-height: 48px !important;
  display: block !important;
  background: rgba(7,21,35,.94) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
/* Coordonnées immédiatement sous le bandeau de recherche, avec espace */
/* Analyse sous les coordonnées, sans superposition */
/* Profil longitudinal réellement rétractable */
.profile-head{
  cursor: pointer;
  gap: 10px;
}
.profile-head #profileMeta{
  margin-left: auto;
}
.profile-box.collapsed-profile{
  height: 34px !important;
  min-height: 34px !important;
  padding: 8px 12px !important;
}
.profile-box.collapsed-profile #profileCanvas{
  display: none !important;
}
.profile-box.collapsed-profile #profileMeta{
  display: none !important;
}
/* ===== V0.3.4 — réparation UI sans restructurer le DOM ===== */
/* Colonne gauche : + / - / N / DZ, tous identiques */
.controls .btn, .controls .edit-btn{
  position: static !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
.controls .edit-btn::after{
  content: none;
}
/* Coordonnées : sous le bandeau de recherche */
/* Analyse : franchement sous les coordonnées */
/* Pente en bas ; le profil est positionné dynamiquement au-dessus en JS */
.panel{
  transition: all .2s ease;
  bottom: calc(env(safe-area-inset-bottom,0px) + 10px) !important;
}
.profile-box{
  bottom: calc(env(safe-area-inset-bottom,0px) + 180px) !important;
}
/* neutraliser les anciens déplacements liés au panneau replié */
body.panel-collapsed .profile-box{
  bottom: calc(env(safe-area-inset-bottom,0px) + 180px) !important;
}
/* ===== V0.3.5 — mise en page stabilisée ===== */
/* Coordonnées entièrement sous la barre de recherche */
/* Analyse sous les coordonnées avec marge nette */
/* Les deux panneaux bas restent accolés une fois repliés */
.panel.collapsed .panel-togglebar{
  margin: 0;
  min-height: 28px !important;
}
.profile-box.collapsed-profile{
  height: 42px !important;
  min-height: 42px !important;
  padding: 6px 12px !important;
}
.profile-box.collapsed-profile .profile-head{
  min-height: 28px !important;
  margin: 0 !important;
}
/* ===== V0.3.6 — corrections robustes de layout ===== */
/* Les positions verticales coordonnées/analyse sont désormais calculées en JS */
.analysis-box{
  top: calc(env(safe-area-inset-top,0px) + 178px) !important;
  right: calc(env(safe-area-inset-right,0px) + 18px) !important;
  left: auto !important;
  width: min(360px,calc(100vw - 36px)) !important;
}
/* Panneaux bas : JS écrit bottom avec priorité !important */
.panel.collapsed{
  padding: 6px 12px !important;
  height: 42px !important;
  min-height: 42px !important;
}
.profile-box.collapsed-profile{
  height: 42px !important;
  min-height: 42px !important;
  padding: 6px 12px !important;
}
.profile-box.collapsed-profile .profile-head{
  min-height: 28px !important;
  margin: 0 !important;
}
/* ===== V0.3.8 ===== */
.drawer-good #basemapSelect{
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 14px;
}
.drawer-good #basemapSelect{
  margin: 0;
}
.coord-box{
  position: absolute;
  z-index: 1000;
  right: calc(env(safe-area-inset-right,0px) + 18px);
  top: calc(env(safe-area-inset-top,0px) + 112px) !important;
  background: rgba(7,21,35,.94);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  line-height: 1.35;
  left: auto;
  margin-top: 8px;
  margin: 0;
  max-width: 330px;
  cursor: pointer;
  user-select: none;
}
/* ===== V0.3.47 ===== */
.startup-warning{
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top,0px) + 24px) calc(env(safe-area-inset-right,0px) + 24px) calc(env(safe-area-inset-bottom,0px) + 24px) calc(env(safe-area-inset-left,0px) + 24px);
  background: rgba(0,0,0,.56);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.startup-warning.hidden{
  display: none !important;
}
.startup-warning-card{
  width: min(430px,calc(100vw - 40px));
  background: rgba(7,21,35,.98);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 22px 22px 18px;
  text-align: center;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.startup-warning-icon{
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffad3d;
  color: #071523;
  font-size: 27px;
  font-weight: 950;
}
.startup-warning-title{
  font-size: 19px;
  font-weight: 900;
  margin-bottom: 12px;
}
.startup-warning-text{
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
  margin: 0 auto 18px;
  max-width: 360px;
}
.startup-warning button{
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 11px;
  background: #fff;
  color: #071523;
  font-size: 15px;
  font-weight: 900;
}
.analysis-box.pending .analysis-light{
  background: #9eacb9;
}
.analysis-box.pending .summary{
  color: #c7d1da;
}
/* ===== V0.3.47 — interface web/PWA ===== */
.drawer-version strong{
  color: #fff;
  font-size: 13px;
}
#drawerUpdate{
  background: #12283d !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14);
}
/* ===== V0.3.47 — mise en forme haute ===== */
.controls{
  gap: 10px;
  top: calc(env(safe-area-inset-top,0px) + 58px) !important;
  left: calc(env(safe-area-inset-left,0px) + 8px);
}
.drawer-good{
  top: calc(env(safe-area-inset-top,0px) + 56px) !important;
  left: calc(env(safe-area-inset-left,0px) + 8px);
  /* En paysage sur téléphone la hauteur disponible est courte : le menu
     défile plutôt que de sortir de l'écran. */
  max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@supports not (height: 100dvh){
  .drawer-good{
    max-height: calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 72px);
  }
}
/* Menu homogène */
.drawer-good select, .drawer-good button{
  background: #12283d !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  text-align: center !important;
  font-weight: 700 !important;
}
.drawer-good select{
  text-align-last: center;
}
.drawer-good button{
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.drawer-version{
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: #9eacb9;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-direction: column;
  text-align: center;
}
#updateStatus{
  display: block;
  min-height: 16px;
  margin-top: 4px;
  color: #9eacb9;
  font-size: 11px;
  text-align: center;
}
/* Symbole Nord */
#north{
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#north .north-symbol .arrow{
  font-size: 27px;
  font-weight: 900;
}
/* Punaise DZ : blanc / orange / vert */
#editBtn{
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .15s ease, box-shadow .15s ease;
}
#editBtn .dz-pin{
  position: relative;
  width: 28px;
  height: 34px;
  display: block;
}
#editBtn .dz-pin::before{
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: currentColor;
}
#editBtn .dz-pin::after{
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0d2234;
}
#editBtn.dz-none{
  color: #fff !important;
}
#editBtn.dz-edit{
  color: #ff9f1a !important;
}
#editBtn.dz-valid{
  color: #41d363 !important;
}
/* ===== V0.3.47 — pictogrammes affinés ===== */
/* Bouton Nord : symbole plus profilé */
#north .north-symbol{
  width: 36px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#north .north-symbol .n{
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 1px;
}
#north .north-symbol .nav-arrow{
  width: 24px;
  height: 30px;
  display: block;
}
#north .north-symbol .nav-arrow svg{
  width: 100%;
  height: 100%;
  display: block;
}
/* Bouton LZ : punaise avec cercle de base */
#editBtn .dz-pin{
  width: 34px;
  height: 36px;
  display: block;
}
/* ===== V0.3.47 — finitions interface ===== */
/* Menu et localisation : même gabarit que les commandes carte */
/* La punaise LZ est maintenant entièrement dessinée en SVG.
   On neutralise les anciens pseudo-éléments CSS qui masquaient son cercle intérieur. */
#editBtn .dz-pin::before, #editBtn .dz-pin::after{
  content: none;
  display: none !important;
}
#editBtn .dz-pin{
  width: 34px !important;
  height: 38px !important;
}
#editBtn .dz-pin svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
#editBtn .dz-pin .pin-hole{
  fill: #0d2234;
  stroke: currentColor;
  stroke-width: 1.2;
}
/* Analyse réduite : uniquement l'état couleur + le titre */
/* ===== V0.3.47 — corrections largeur mobile ===== */
/* Les 2 boutons de la barre haute restent toujours visibles.
   Suppression du max-width/margin auto historique qui pouvait pousser
   le bouton de localisation hors écran sur smartphone. */
.topbar{
  top: env(safe-area-inset-top,0px) !important;
  left: calc(env(safe-area-inset-left,0px) + 8px);
  right: calc(env(safe-area-inset-right,0px) + 8px);
  display: grid !important;
  grid-template-columns: 48px minmax(0,1fr) 48px;
  gap: 8px;
  align-items: center;
}
.topbar .btn{
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px;
  min-width: 48px !important;
  margin: 0 !important;
}
.topbar .search{
  height: 48px;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
/* Analyse repliée : format compact */
.analysis-box.collapsed .analysis-head .title{
  flex: 0 0 auto;
}
/* ===== V0.3.47 — Analyse compacte par défaut ===== */
/* En mode réduit, petit onglet à droite quel que soit le statut. */
.analysis-box.collapsed{
  width: 150px !important;
  min-width: 150px;
  max-width: 150px;
  right: 14px !important;
  left: auto !important;
  height: auto !important;
}
.analysis-box.collapsed .analysis-head{
  padding-right: 14px;
  min-height: 48px;
  padding: 8px 12px;
  gap: 9px;
  justify-content: flex-start;
}
.analysis-box.collapsed .analysis-head .summary, .analysis-box.collapsed .analysis-head .chev{
  display: none !important;
}
.analysis-box.collapsed .analysis-body{
  display: none !important;
}
/* Développé : retour à la grande fenêtre habituelle */
.analysis-box:not(.collapsed){
  left: auto !important;
  right: 14px !important;
}
/* ===== V0.3.47 ===== */
.startup-update-notice{
  margin: 16px 0 4px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,159,26,.12);
  border: 1px solid rgba(255,159,26,.45);
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
}
.startup-update-notice span{
  font-size: 12px;
  color: #c9d3dc;
}
.startup-update-notice button{
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: #ff9f1a;
  color: #071523;
  font-weight: 800;
}
#mapBaseBtn img{
  width: 34px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.basemap-quick{
  position: fixed;
  z-index: 1800;
  left: calc(env(safe-area-inset-left,0px) + 66px);
  top: calc(env(safe-area-inset-top,0px) + 162px);
  display: none;
  flex-direction: column;
  gap: 6px;
  background: rgba(7,21,35,.96);
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.basemap-quick.open{
  display: flex;
}
.basemap-quick button{
  min-width: 170px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: #12283d;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
/* ===== V0.3.47 ===== */
.startup-current-version{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #c9d3dc;
  text-align: center;
}
/* ===== V0.3.47 — bouton Taille & profil LZ ===== */
#lzConfigBtn{
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#lzConfigBtn img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}
.lz-config-modal{
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top,0px) + 18px) calc(env(safe-area-inset-right,0px) + 18px) calc(env(safe-area-inset-bottom,0px) + 18px) calc(env(safe-area-inset-left,0px) + 18px);
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(2px);
}
.lz-config-modal.open{
  display: flex;
}
.lz-config-card{
  width: min(360px,92vw);
  border-radius: 18px;
  padding: 18px;
  background: rgba(7,21,35,.98);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  color: #fff;
}
.lz-config-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 18px;
}
.lz-config-head button{
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: #12283d;
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
.lz-config-card label{
  display: block;
  margin: 12px 0 7px;
  color: #c9d3dc;
  font-size: 13px;
  font-weight: 700;
}
.lz-config-card select{
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: #12283d;
  color: #fff;
  padding: 0 12px;
  font-size: 16px;
}
.lz-size-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: end;
}
.lz-size-row>div{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}
.lz-size-row>div>span{
  grid-column: 1 / -1;
  font-size: 12px;
  color: #9eacb9;
}
.lz-size-row input{
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15);
  background: #12283d;
  color: #fff;
  padding: 0 10px;
  font-size: 18px;
  text-align: center;
}
.lz-size-row small{
  color: #c9d3dc;
  font-size: 14px;
}
.lz-size-row .times{
  align-self: center;
  margin-top: 22px;
  font-size: 20px;
  color: #c9d3dc;
}
#lzConfigDone{
  width: 100%;
  height: 46px;
  margin-top: 18px;
  border: 0;
  border-radius: 10px;
  background: #1e9f50;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}
/* ===== V0.3.47 — alignement bord droit ===== */
#coordBox{
  right: calc(env(safe-area-inset-right,0px) + 12px);
}
#analysisBox, .analysis-box{
  right: calc(env(safe-area-inset-right,0px) + 12px) !important;
}
.analysis-box.collapsed, .analysis-box:not(.collapsed){
  right: calc(env(safe-area-inset-right,0px) + 12px) !important;
}
/* ===== V0.3.47 — centrage Cougar + panneau Pente ===== */
.aircraft-symbol{
  position: relative;
  pointer-events: none;
  transform-origin: 50% 50%;
}
@media(max-width:900px){
  #slopePanel .card{
    min-height: 72px !important;
    padding: 10px 7px !important;
    text-align: center !important;
  }
  #slopePanel .card:first-child{
    grid-column: 1 / -1;
    min-height: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  #slopePanel .card:nth-child(2), #slopePanel .card:nth-child(3), #slopePanel .card:nth-child(4){
    display: block !important;
  }
  #slopePanel .card:nth-child(n+5){
    display: none !important;
  }
}
/* ===== V0.3.47 — Pente : grille 1 / 3 / 2 ===== */
@media(max-width:900px){
  #slopePanel .cards{
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 8px;
    display: grid !important;
  }
  #slopePanel .card{
    display: block !important;
    min-width: 0;
    padding: 9px 6px !important;
    text-align: center !important;
  }
  #slopePanel .slope-status-card{
    grid-column: 1 / -1;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  #slopePanel .slope-main-card{
    grid-column: span 2;
    min-height: 72px;
  }
  #slopePanel .slope-secondary-card{
    grid-column: span 3;
    min-height: 72px;
  }
  #slopePanel .status{
    justify-content: center;
    font-size: 18px;
  }
  #slopePanel .label{
    font-size: 10px;
    letter-spacing: .02em;
    white-space: normal;
    line-height: 1.15;
  }
  #slopePanel .value{
    font-size: 23px;
    margin-top: 5px;
  }
  #slopePanel .sub{
    font-size: 10px;
    margin-top: 2px;
  }
}
/* ===== V0.3.47 — repli Pente/Profil ===== */
#slopePanel.collapsed{
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
}
#slopePanel.collapsed .cards, #slopePanel.collapsed .footer{
  display: none !important;
}
#slopePanel.collapsed .panel-togglebar{
  height: 34px;
  min-height: 34px !important;
  margin: 0;
  padding: 0 3px;
}
.profile-box.collapsed{
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
}
.profile-box.collapsed #profileCanvas, .profile-box.collapsed .profile-meta{
  display: none !important;
}
.profile-box.collapsed .profile-head{
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
}
/* Les deux barres repliées restent empilées proprement en bas. */
body.panel-collapsed .profile-box.collapsed{
  bottom: calc(env(safe-area-inset-bottom,0px) + 72px) !important;
}
/* ===== V0.3.47 — recherche DDM / MGRS ===== */
.search-hint{
  position: absolute;
  z-index: 1001;
  top: calc(env(safe-area-inset-top,0px) + 108px);
  left: 80px;
  right: 80px;
  max-width: 760px;
  margin: auto;
  background: rgba(7,21,35,.97);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  padding: 8px 12px;
  color: #dce5ed;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  display: none;
  pointer-events: none;
}
.search-hint.show{
  display: block;
}
.search-hint b{
  color: #fff;
}
@media(max-width:700px){
  .search-hint{
    left: 114px;
    right: 68px;
    top: calc(env(safe-area-inset-top,0px) + 106px);
    font-size: 10px;
  }
}
/* ===== V0.3.47 — correctif Profil DZ rétractable ===== */
.profile-box.collapsed-profile{
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
}
.profile-box.collapsed-profile #profileCanvas, .profile-box.collapsed-profile .profile-meta{
  display: none !important;
}
.profile-box.collapsed-profile .profile-head{
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
}
/* ===== V0.3.47 — visuel TIGRE ===== */
.aircraft-symbol img{
  position: absolute;
  left: 50%;
  top: 50% !important;
  transform: translate(-50%,-50%) !important;
  transform-origin: 50% 50%;
}
/* ===== V0.3.59 — pastille de mise à jour dans le menu ===== */
.update-badge{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffad3d;
  color: #071523;
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
}

/* ===== V0.3.66 — fenêtre SAV ===== */
.sav-modal{
  position:fixed;inset:0;z-index:3000;
  display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 18px) calc(env(safe-area-inset-right,0px) + 18px) calc(env(safe-area-inset-bottom,0px) + 18px) calc(env(safe-area-inset-left,0px) + 18px);background:rgba(3,10,18,.72);
}
.sav-modal[hidden]{display:none;}
.sav-card{
  width:100%;max-width:420px;max-height:86vh;overflow:auto;
  background:#0d1b2c;border:1px solid #1e3550;border-radius:16px;
  padding:16px;box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.sav-title{
  display:flex;align-items:center;justify-content:space-between;
  font-size:18px;font-weight:800;color:#e8f1fb;margin-bottom:6px;
}
.sav-title button{
  background:none;border:none;color:#8aa3bd;font-size:26px;
  line-height:1;padding:0 4px;cursor:pointer;
}
.sav-intro{margin:0 0 12px;font-size:13px;line-height:1.45;color:#9fb4cb;}
#savText{
  width:100%;box-sizing:border-box;resize:vertical;
  background:#071523;color:#e8f1fb;
  border:1px solid #24405e;border-radius:10px;
  padding:10px;font-size:15px;font-family:inherit;
}
.sav-shot{margin:10px 0;font-size:12px;color:#8aa3bd;}
#savSend{
  width:100%;padding:12px;border:none;border-radius:10px;
  background:#2f7de0;color:#fff;font-size:16px;font-weight:700;cursor:pointer;
}
#basemapSelect[hidden]{display:none !important;}
#savSend:disabled{background:#2a4a72;opacity:.6;cursor:default;}
.sav-status{margin-top:10px;font-size:13px;line-height:1.4;min-height:1em;}
.sav-ok{color:#4ad07a;font-weight:700;}
.sav-warn{color:#ffad3d;}

/* ===== V0.3.67 — champ pseudo du SAV ===== */
#savPseudo{
  width:100%;box-sizing:border-box;margin-bottom:8px;
  background:#071523;color:#e8f1fb;
  border:1px solid #24405e;border-radius:10px;
  padding:10px;font-size:15px;font-family:inherit;
}
#savPseudo.sav-missing{border-color:#ff5c5c;}

/* ===== V0.3.72 — DZ prédéfinies ===== */
/* Même bandeau que Profil DZ : titre à gauche, état au milieu, chevron à droite. */
.dz-preset-btn{
  /* Même boîte que le sélecteur Profil et les champs de dimensions de la carte. */
  display:flex !important;
  align-items:center;
  gap:10px;
  width:100%;
  height:46px;
  margin-top:16px;
  padding:0 12px !important;
  text-align:left !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.15) !important;
  background:#12283d !important;
  color:#fff !important;
  font-size:16px;
  cursor:pointer;
}
.dz-preset-btn b{font-size:16px;font-weight:700;}
.dz-preset-current{
  margin-left:auto;color:#9eacb9;font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;
}
.dz-preset-btn .chev{color:#9eacb9;font-size:15px;}

/* Rappel du plan le long de la DZ, sur la carte. */
.dz-plan-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.4px;
  color:#eaf3ff;
  text-shadow:0 0 4px #000,0 0 8px #000;
  white-space:nowrap;
  text-align:center;
  pointer-events:none;
}
.dz-preset-list{display:flex;flex-direction:column;gap:8px;}
.dz-preset-list button{
  width:100%;text-align:left;
  background:#12283d;color:#e8f1fb;
  border:1px solid #24405e;border-radius:10px;
  padding:12px;font-size:15px;font-family:inherit;cursor:pointer;
}
.dz-preset-list button strong{display:block;font-size:16px;margin-bottom:2px;}
.dz-preset-list button small{color:#9fb4cb;font-size:12px;}
.dz-preset-back{
  margin-top:10px;background:none !important;border:none !important;
  color:#8aa3bd !important;text-align:center !important;font-size:13px !important;
}

/* Numéro d'emplacement, à côté de chaque appareil d'un plan multiple. */
.dz-slot-num{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:rgba(7,21,35,.92);
  border:1px solid rgba(255,255,255,.55);
  color:#fff;font-size:12px;font-weight:800;line-height:1;
  box-shadow:0 0 4px rgba(0,0,0,.8);
  pointer-events:none;
}

/* ===== V0.3.78 — échelle du sursol LiDAR ===== */
.mnh-scale{margin:2px 0 4px;}
.mnh-scale-bar{
  display:flex;height:12px;border-radius:6px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
}
.mnh-scale-seg{flex:1;opacity:.5;}
.mnh-scale-seg.on{opacity:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);}
.mnh-scale-ticks{
  display:flex;margin-top:3px;
  font-size:10px;color:#9fb4cb;letter-spacing:.2px;
}
.mnh-scale-ticks span{flex:1;text-align:center;}
.mnh-scale-max{margin-top:4px;font-size:12px;color:#ffb27a;font-weight:700;}

/* ===== V0.3.81 — mesure ponctuelle de hauteur ===== */
.hobst-btn{
  display:flex;align-items:center;justify-content:center;gap:1px;
  line-height:1;padding:0;
}
.hobst-h{font-size:23px;font-weight:800;letter-spacing:-.5px;}
/* « obst » à la verticale le long du H, pour tenir dans les 52 px du bouton. */
.hobst-obst{
  font-size:9px;font-weight:700;letter-spacing:.5px;
  writing-mode:vertical-rl;text-orientation:mixed;
  opacity:.85;
}
.hobst-btn.active{background:#2f7de0;}
.hobst-tip{
  font-size:12px;font-weight:800;color:#fff;
  background:rgba(7,21,35,.95);
  border:1px solid rgba(255,255,255,.25);
  border-radius:8px;padding:3px 7px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.hobst-hint{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(env(safe-area-inset-top,0px) + 82px);
  z-index:1200;pointer-events:none;
  background:rgba(47,125,224,.95);color:#fff;
  font-size:13px;font-weight:700;
  padding:7px 14px;border-radius:20px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}


/* ===== V0.3.84 — palette d'outils rétractable ===== */
.tools-toggle{
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:0;
}
.tools-icon{
  width:42px;
  height:42px;
  display:block;
  object-fit:cover;
  border-radius:12px;
  filter:grayscale(1) contrast(1.08);
  transition:transform .16s ease,filter .16s ease,opacity .16s ease;
}
.tools-toggle.open .tools-icon{
  transform:scale(.94);
  filter:grayscale(1) contrast(1.16) brightness(1.12);
}
.tools-submenu{
  display:none;
  flex-direction:column;
  gap:10px;
}
.tools-submenu.open{
  display:flex;
}

/* ===== V0.3.87 — mesure de distance ===== */
.dist-btn{display:flex;align-items:center;justify-content:center;color:#fff;}
.dist-btn.active{background:#2f7de0;}
.dist-bar{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(env(safe-area-inset-top,0px) + 82px);
  z-index:1200;display:flex;align-items:center;gap:12px;
  background:rgba(47,125,224,.95);color:#fff;
  font-size:13px;font-weight:700;
  padding:6px 8px 6px 16px;border-radius:20px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.dist-bar[hidden]{display:none;}
.dist-bar button{
  background:rgba(0,0,0,.28);color:#fff;border:0;
  border-radius:14px;padding:6px 12px;
  font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;
}
.dist-bar button:disabled{opacity:.4;}
.dist-tip{
  font-size:11px;font-weight:800;color:#fff;
  background:rgba(7,21,35,.95);
  border:1px solid rgba(255,255,255,.25);
  border-radius:7px;padding:2px 6px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.dist-tip-total{background:#2f7de0;border-color:rgba(255,255,255,.55);}

/* ===== V0.3.87 — légende ===== */
.legend-card{max-width:460px;}
.legend-sec{margin:16px 0 6px;font-size:14px;font-weight:800;color:#e8f1fb;}
.legend-sec:first-child{margin-top:4px;}
.legend-intro{margin:0 0 4px;font-size:12px;line-height:1.45;color:#9fb4cb;}
.legend-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:5px 0;font-size:13px;line-height:1.35;color:#dbe6f2;
}
.legend-swatch{
  flex:0 0 16px;height:16px;border-radius:4px;margin-top:1px;
  border:1px solid rgba(255,255,255,.35);
}
.legend-swatch.round{border-radius:50%;}
.legend-swatch.dashed{background:transparent;border-style:dashed;border-width:2px;}
.legend-row b{color:#fff;font-weight:700;}
.legend-row small{display:block;color:#9fb4cb;font-size:11.5px;margin-top:1px;}
.legend-scale{display:flex;height:12px;border-radius:6px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);margin:4px 0 2px;}
.legend-scale div{flex:1;}
.legend-note{
  margin-top:14px;padding:10px 12px;border-radius:10px;
  background:rgba(255,173,61,.12);border:1px solid rgba(255,173,61,.3);
  font-size:12px;line-height:1.45;color:#ffd7a8;
}

/* ===== V0.3.88 — rappel de l'axe d'approche ===== */
.dz-axis-label{
  font-size:11px;font-weight:800;letter-spacing:.6px;
  color:#eaf3ff;text-shadow:0 0 4px #000,0 0 8px #000;
  white-space:nowrap;text-align:center;pointer-events:none;
}

/* ===== V0.3.94 — vue 3D ===== */
.v3d-btn{display:flex;align-items:center;justify-content:center;color:#fff;}
.v3d{position:fixed;inset:0;z-index:4000;background:#0a1520;}
.v3d[hidden]{display:none;}
#view3dCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}
.v3d-top{
  position:absolute;left:0;right:0;top:0;z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 12px) 10px calc(env(safe-area-inset-left,0px) + 12px);
  background:linear-gradient(rgba(7,21,35,.92),rgba(7,21,35,0));
}
.v3d-title{flex:1;font-size:14px;font-weight:800;color:#e8f1fb;}
.v3d-close{
  background:rgba(7,21,35,.92);color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:9px 14px;font-size:14px;font-weight:700;font-family:inherit;
}
.v3d-info{
  position:absolute;left:calc(env(safe-area-inset-left,0px) + 12px);top:calc(env(safe-area-inset-top,0px) + 60px);z-index:2;
  background:rgba(7,21,35,.88);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:10px 12px;min-width:150px;
}
.v3d-info div{display:flex;justify-content:space-between;gap:14px;
  font-size:12px;color:#9fb4cb;padding:2px 0;}
.v3d-info b{color:#fff;font-weight:700;}
.v3d-side{
  position:absolute;right:calc(env(safe-area-inset-right,0px) + 12px);top:calc(env(safe-area-inset-top,0px) + 60px);z-index:2;
  display:flex;flex-direction:column;gap:10px;
}
.v3d-group{
  background:rgba(7,21,35,.88);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;
}
.v3d-label{font-size:10px;color:#9fb4cb;text-align:center;letter-spacing:.3px;}
.v3d-group button{
  background:#12283d;color:#e8f1fb;border:1px solid rgba(255,255,255,.12);
  border-radius:9px;padding:8px 12px;font-size:12px;font-weight:700;font-family:inherit;
}
.v3d-group button.on{background:#2f7de0;color:#fff;}
.v3d-modes{
  position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 34px);
  z-index:2;display:flex;justify-content:center;gap:8px;padding:0 calc(env(safe-area-inset-right,0px) + 12px) 0 calc(env(safe-area-inset-left,0px) + 12px);
}
.v3d-modes button{
  background:rgba(7,21,35,.9);color:#e8f1fb;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:10px 18px;font-size:13px;font-weight:700;font-family:inherit;
}
.v3d-modes button.on{background:#2f7de0;color:#fff;border-color:#2f7de0;}
.v3d-status{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  background:rgba(7,21,35,.95);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:12px 18px;font-size:14px;font-weight:700;color:#e8f1fb;
  display:none;text-align:center;max-width:80%;
}
.v3d-hint{
  position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
  z-index:2;text-align:center;font-size:11px;color:#7d93ab;
}

/* ===== V0.3.95 — vue 3D, lisibilité ===== */
.v3d-btn{font-size:19px;font-weight:800;letter-spacing:.5px;}
.v3d-toggle{
  position:absolute;right:calc(env(safe-area-inset-right,0px) + 12px);top:calc(env(safe-area-inset-top,0px) + 60px);z-index:3;
  width:34px;height:34px;border-radius:10px;
  background:rgba(7,21,35,.9);color:#e8f1fb;
  border:1px solid rgba(255,255,255,.16);
  font-size:17px;font-weight:800;line-height:1;font-family:inherit;
  transition:transform .18s ease;
}
.v3d-toggle.replie{transform:rotate(180deg);}
.v3d-side{transition:opacity .18s ease, transform .18s ease;}
.v3d-side.replie{opacity:0;transform:translateX(24px);pointer-events:none;}
.v3d-info{transition:opacity .18s ease;}
.v3d-info.replie{opacity:0;pointer-events:none;}
.v3d-side{top:calc(env(safe-area-inset-top,0px) + 104px);}

/* ===== V0.3.99 — barème de la vue 3D ===== */
.v3d-scale{
  position:absolute;left:calc(env(safe-area-inset-left,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  z-index:2;display:none;
  background:rgba(7,21,35,.88);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:8px 10px;
}
.v3d-scale-bar{height:10px;border-radius:5px;border:1px solid rgba(255,255,255,.2);}
.v3d-scale-ticks{display:flex;justify-content:space-between;margin-top:4px;
  font-size:10px;color:#9fb4cb;}
.v3d-scale-ticks span:nth-child(2){color:#7d93ab;}
.v3d-scale-note{margin-top:4px;font-size:10px;color:#ffad3d;text-align:center;}

/* ===== V0.5.3 — le panneau Analyse devient défilant ===== */
/* Sans hauteur maximale, le panneau grandissait sous le bord de l'écran et les
   derniers motifs devenaient inatteignables : overflow:hidden sur la boîte les
   masquait sans offrir de défilement. */
.analysis-body{
  max-height: calc(100dvh - 330px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow-y: auto;
  overscroll-behavior: contain;      /* le défilement ne se propage pas à la carte */
  -webkit-overflow-scrolling: touch;
}
/* Repli de sécurité pour les navigateurs sans unité dvh. */
@supports not (height: 100dvh){
  .analysis-body{ max-height: calc(100vh - 330px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); }
}
.analysis-body::-webkit-scrollbar{ width: 4px; }
.analysis-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius: 2px;
}
/* Liseré discret en bas du panneau : il signale qu'il reste du contenu. */
.analysis-box:not(.collapsed){ position: absolute; }
.analysis-box:not(.collapsed)::after{
  content: '';
  position: absolute; left: 1px; right: 5px; bottom: 1px; height: 18px;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(rgba(7,21,35,0),rgba(7,21,35,.92));
  pointer-events: none;
}

/* ===== V0.5.5 — pointage du profil =====
   Le doigt se promène sur la courbe du Profil DZ et le point correspondant
   est reporté sur la carte. */

/* Sans cela, iOS prend le glissement sur la courbe pour un défilement de page
   et le pointage devient inutilisable. */
#profileCanvas{
  touch-action: none;
  cursor: crosshair;
}

/* Pendant que le doigt est posé, la silhouette s'efface : elle est dessinée à
   l'échelle et masquerait le terrain juste sous le repère. Elle revient dès
   que le doigt se lève, pour garder la référence d'orientation. */
body.profil-doigt .aircraft-symbol,
body.profil-doigt .axis-arrow,
body.profil-doigt .dz-slot-num{
  opacity: .22;
}
.aircraft-symbol, .axis-arrow, .dz-slot-num{
  transition: opacity .12s ease;
}

/* Sortie du mode : rendue visible par app.js seulement quand le mode est actif. */
.profile-exit{
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: #12283d;
  color: #e8f1fb;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  font-family: inherit;
}
.profile-exit[hidden]{
  display: none;
}

/* ===== V0.5.6 — bibliothèque de DZ ===== */

.dzlib-save{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
}
.dzlib-save input{
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #1e3550;
  background: #0b1626;
  color: #e8f1fb;
  font-size: 15px;
  font-family: inherit;
}
.dzlib-save button{
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: #2f7de0;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
}
.dzlib-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dzlib-row{
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.dzlib-open{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #1e3550;
  border-radius: 10px;
  background: #12283d;
  color: #e8f1fb;
  text-align: left;
  font-family: inherit;
}
.dzlib-open b{
  font-size: 15px;
  font-weight: 800;
}
.dzlib-open small{
  color: #9fb4cb;
  font-size: 11.5px;
  line-height: 1.35;
}
.dzlib-open .dzlib-date{
  color: #6e86a0;
  font-size: 10.5px;
}
.dzlib-del{
  flex: 0 0 44px;
  border: 1px solid rgba(255,91,87,.35);
  border-radius: 10px;
  background: rgba(255,91,87,.12);
  color: #ff8d8a;
  font-size: 17px;
  font-family: inherit;
}

/* ===== V0.6.0 — profil d'approche ===== */

.appr-btn svg{ display:block; }

/* Bandeau de choix de l'axe : il se pose en haut, sous la barre de recherche,
   et laisse la carte visible pour que la flèche se lise pendant le réglage. */
.appr-bar{
  position: absolute;
  z-index: 1300;
  top: calc(env(safe-area-inset-top,0px) + 58px);
  /* Décalé de la colonne de boutons, qui reste accessible pendant le réglage. */
  left: calc(env(safe-area-inset-left,0px) + 64px);
  width: min(310px, calc(100vw - 76px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
  max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(7,21,35,.97);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 12px 14px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
@supports not (height: 100dvh){
  .appr-bar{ max-height: calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 90px); }
}
.appr-bar[hidden]{ display:none; }
.appr-bar-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:16px; color:#e8f1fb; margin-bottom:10px;
}
.appr-bar-head button{
  background:none; border:none; color:#8aa3bd; font-size:24px;
  line-height:1; padding:0 4px; font-family:inherit;
}
.appr-seg{ display:flex; align-items:center; gap:6px; }
.appr-seg button{
  flex:1 1 auto; height:38px; padding:0 10px;
  border:1px solid rgba(255,255,255,.14); border-radius:9px;
  background:#12283d; color:#c7d6e6;
  font-size:13px; font-weight:700; font-family:inherit;
}
.appr-seg button.on{ background:#2f7de0; color:#fff; border-color:#2f7de0; }
.appr-seg-mini{ flex:0 0 auto; }
.appr-seg-mini button{ flex:0 0 auto; height:26px; padding:0 9px; font-size:11.5px; }
.appr-cap{
  flex:0 0 auto; min-width:52px; text-align:center;
  font-size:13px; font-weight:800; color:#e8f1fb;
}
.appr-consigne{ margin:7px 0 10px; font-size:11.5px; line-height:1.4; color:#9fb4cb; }
.appr-ligne{
  display:flex; align-items:center; gap:8px; margin:10px 0 4px;
}
.appr-lab{ flex:0 0 auto; font-size:12px; color:#9fb4cb; }
.appr-val{ flex:1 1 auto; text-align:right; font-size:12.5px; font-weight:800; color:#e8f1fb; }
.appr-bar input[type=range]{ width:100%; margin:0; }
.appr-cout{ margin:12px 0 8px; font-size:11px; color:#6e86a0; }
.appr-go{
  width:100%; height:44px; border:0; border-radius:10px;
  background:#2f7de0; color:#fff; font-size:15px; font-weight:800; font-family:inherit;
}
.appr-go:disabled{ background:#2a4663; color:#8aa3bd; }
.appr-etat{ margin-top:8px; font-size:12px; line-height:1.4; color:#ffb27a; min-height:1em; }

/* Vue du profil : plein écran, comme la vue 3D. */
/* V0.6.5 — le profil est une feuille basse, pas un plein écran.
   La carte reste visible au-dessus : c'est elle qui porte le trait de l'index
   et les obstacles, et les regarder en même temps que la coupe est tout
   l'intérêt du pointage. Le bouton « Agrandir » rend le plein écran quand on
   veut étudier la coupe seule. */
.appr-view{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: 58dvh;
  /* Le plancher suit la poignée de redimensionnement : plus bas qu'avant, pour
     qu'on puisse réduire la feuille jusqu'à une simple bande de coupe. */
  min-height: 180px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: #071523;
  border-top: 1px solid rgba(255,255,255,.14);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -14px 34px rgba(0,0,0,.5);
  padding: 10px calc(env(safe-area-inset-right,0px) + 12px)
           calc(env(safe-area-inset-bottom,0px) + 10px) calc(env(safe-area-inset-left,0px) + 12px);
  /* Sans cette borne, le dernier avertissement du bilan passait sous le bord. */
  overflow: hidden;
}
@supports not (height: 100dvh){
  .appr-view{ height: 58vh; }
}
.appr-view.plein{
  top: 0;
  height: auto;
  border-radius: 0;
  border-top: 0;
  padding-top: calc(env(safe-area-inset-top,0px) + 10px);
}
.appr-view[hidden]{ display:none; }
.appr-view-top{ display:flex; align-items:center; gap:10px; }
.appr-view-title{ flex:1; font-size:15px; font-weight:800; color:#e8f1fb; }
.appr-refaire, .appr-close{
  background:rgba(18,40,61,.95); color:#fff;
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  padding:9px 14px; font-size:13px; font-weight:700; font-family:inherit;
}
.appr-verdict{
  margin:10px 0 6px; padding:9px 12px; border-radius:10px;
  font-size:12.5px; line-height:1.4; color:#e8f1fb;
  border:1px solid rgba(255,255,255,.12); background:rgba(18,40,61,.6);
}
.appr-verdict.ok{ border-color:rgba(99,211,61,.45); background:rgba(99,211,61,.10); }
.appr-verdict.perce{ border-color:rgba(255,91,87,.5); background:rgba(255,91,87,.12); }
#apprCanvas{
  flex:1 1 auto; width:100%; min-height:150px;
  display:block; touch-action:none; cursor:crosshair;
}
.appr-lecture, .appr-legende, .appr-types, .appr-bilan{ flex:0 0 auto; }
.appr-lecture{
  margin:4px 0 2px; min-height:1.2em;
  font-size:12px; font-weight:700; color:#9fb4cb;
}
.appr-legende{
  display:flex; flex-wrap:wrap; gap:4px 14px;
  font-size:10.5px; color:#8aa3bd;
}
.appr-legende span{ display:flex; align-items:center; gap:5px; }
.appr-legende i{ width:12px; height:3px; border-radius:2px; }

/* Étiquette du début d'approche, posée sur la carte. */
.appr-etiquette{
  text-align:center; font-size:11px; font-weight:800; line-height:1.25;
  color:#e8f1fb; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9);
  pointer-events:none;
}

/* Pendant le choix de l'axe, le haut de l'écran est rendu à la carte : les
   coordonnées et le panneau Analyse ne servent pas à cette tâche. */
body.appr-choix #coordBox{ display: none !important; }

/* ===== V0.6.1 — sources du couloir ===== */

.appr-bilan{
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  max-height: 96px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.appr-src{
  display: grid;
  grid-template-columns: 74px 58px 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(18,40,61,.55);
  font-size: 11px;
}
.appr-src b{ color:#e8f1fb; font-size:11.5px; }
.appr-src span{ font-weight:800; color:#63d33d; }
.appr-src small{ color:#8aa3bd; line-height:1.3; }
/* Une source sans rien à signaler n'est pas une source en panne : la seconde
   se voit, la première reste discrète. */
.appr-src.vide span{ color:#8aa3bd; font-weight:700; }
.appr-src.muette{ background: rgba(255,91,87,.14); }
.appr-src.muette span{ color:#ff8d8a; }
.appr-avert{
  margin: 6px 0 0;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255,91,87,.4);
  background: rgba(255,91,87,.10);
  color: #ffb7b5;
  font-size: 11px;
  line-height: 1.4;
}

/* ===== V0.6.2 — SIA ===== */
.appr-src.espace{ background: rgba(143,125,255,.14); }
.appr-src.espace b{ color:#c9c0ff; }
.appr-src.espace span{ color:#c9c0ff; font-weight:800; }
.appr-cycle{
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: #6e86a0;
}
.appr-src.info{ background: rgba(255,255,255,.05); }
.appr-src.info b, .appr-src.info span{ color:#8aa3bd; font-weight:700; }

/* ===== V0.6.3 — pastilles d'espace aérien ===== */

.appr-types{
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding-bottom: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.appr-types::-webkit-scrollbar{ display:none; }
.appr-types[hidden]{ display:none; }
.appr-types-lab{
  flex: 0 0 auto;
  font-size: 10.5px;
  color: #6e86a0;
  padding-right: 2px;
}
.appr-chip{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(143,125,255,.35);
  border-radius: 13px;
  background: rgba(143,125,255,.10);
  color: #9b8ad6;
  font-family: inherit;
  font-size: 11px;
}
.appr-chip b{ font-weight: 800; font-size: 11.5px; }
/* Le compte reste lisible éteint comme allumé : masquer un type ne doit pas
   faire oublier qu'il est là. */
.appr-chip i{
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  opacity: .75;
}
.appr-chip.on{
  background: #8f7dff;
  border-color: #8f7dff;
  color: #fff;
}
.appr-chip-tout{
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: #c7d6e6;
  font-weight: 700;
}
/* Un espace masqué reste dans la liste, en sourdine. */
.appr-src.espace.eteint{ background: rgba(255,255,255,.04); opacity:.65; }
.appr-src.espace.eteint b,
.appr-src.espace.eteint span{ color:#8aa3bd; }
.appr-verdict.vigilance{ border-color:rgba(255,173,61,.5); background:rgba(255,173,61,.12); }

/* Profil calculé pour une autre position de DZ : on le garde, on le signale. */
.appr-perime{
  flex: 0 0 auto;
  margin: 8px 0 0;
  padding: 8px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255,173,61,.5);
  background: rgba(255,173,61,.12);
  color: #ffcf9a;
  font-size: 11.5px;
  line-height: 1.4;
}
.appr-perime[hidden]{ display:none; }
.appr-legende i.plein{ height:7px; border-radius:2px; }
.appr-legende i.tirets{
  width:14px; height:0; border-top:2px dashed rgba(159,180,203,.8); border-radius:0;
}

/* En demi-écran, la place manque : le bas de la feuille défile d'un bloc
   plutôt que de rogner le dessin. */
.appr-bas{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* En demi-écran, le dessin passe avant le reste : le bas de la feuille cède
   la place et défile, plutôt que de réduire la coupe à une bande illisible. */
.appr-view:not(.plein) #apprCanvas{ min-height: 150px; }
.appr-view:not(.plein) .appr-bas{ flex: 0 1 auto; max-height: 36%; }
.appr-view:not(.plein) .appr-verdict{
  font-size: 11.5px; padding: 7px 10px; margin: 7px 0 4px;
}
.appr-view:not(.plein) .appr-perime{ font-size: 10.5px; padding: 6px 9px; margin-top: 6px; }
.appr-view:not(.plein) .appr-legende{ display: none; }
.appr-view:not(.plein) .appr-bilan{ max-height: none; overflow: visible; }
.appr-grandir{
  background: rgba(18,40,61,.95); color:#fff;
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  padding: 9px 12px; font-size: 13px; font-weight: 700; font-family: inherit;
}

/* ===== V0.7.1 — colonne d'outils ===== */

/* Bouton DZ mis en évidence : c'est le geste central de l'application.
   Or métallique, volontairement distinct de l'orange #ffad3d qui porte les
   avertissements et de l'ambre #ffb03d des hauteurs estimées — un liseré de
   mise en avant ne doit pas se lire comme une alerte. L'anneau intérieur
   sombre détache le doré du fond du bouton. */
#editBtn{
  border: 2px solid #d4af37 !important;
  box-shadow: 0 0 0 1px rgba(7,21,35,.9) inset,
              0 0 10px rgba(212,175,55,.35),
              0 8px 24px rgba(0,0,0,.2) !important;
}

/* Bouton des DZ enregistrées, posé juste sous la DZ.
   La colonne impose « position: static !important » à ses boutons : sans ce
   rétablissement, le compteur s'ancrait sur la colonne entière et remontait
   tout en haut de l'écran. */
.controls .dzlib-btn, .dzlib-btn{
  position: relative !important;
  overflow: visible;
}
.dzlib-btn svg{
  display: block;
  margin: auto;
}
.dzlib-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  border: 1.5px solid #071523;
  background: #2f7de0;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}
.dzlib-badge:empty{
  display: none;
}
.appr-btn svg{
  display: block;
  margin: auto;
}

/* ===== V0.7.4 — colonne d'outils atteignable ===== */

/* Onze boutons ne tiennent pas sous une barre de recherche quand la fenêtre
   est courte : les derniers — dont la 3D — passaient sous les panneaux bas et
   devenaient inatteignables. La colonne se borne donc à la place réellement
   disponible et défile au besoin. */
.controls{
  max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 170px);
  overflow-y: auto;
  overflow-x: visible;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-right: 2px;
}
.controls::-webkit-scrollbar{ display: none; }
/* Le compteur de la disquette déborde du bouton : sans cette marge il serait
   rogné par le défilement. */
.controls{ padding-top: 6px; }
@supports not (height: 100dvh){
  .controls{
    max-height: calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 170px);
  }
}
/* Quand les panneaux bas sont repliés, la colonne récupère la place. */
body.panel-collapsed .controls{
  max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 110px);
}
@supports not (height: 100dvh){
  body.panel-collapsed .controls{
    max-height: calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 110px);
  }
}

/* Échelle des hauteurs de sursol, sous la coupe. */
.appr-echelle{
  display: flex;
  flex-wrap: wrap;
  gap: 3px 9px;
  align-items: center;
}
.appr-ech-case{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #8aa3bd;
}
.appr-ech-case i{
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: block;
}

/* ===== V0.7.4 — poignée et zoom ===== */

/* Poignée de redimensionnement. Elle vit dans le bandeau, hors du canevas,
   pour ne pas disputer les appuis au pointage. */
.appr-poignee{
  flex: 0 0 auto;
  height: 18px;
  margin: -4px 0 2px;
  cursor: ns-resize;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.appr-poignee::before{
  content: '';
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.28);
}
.appr-poignee:active::before{ background: rgba(255,255,255,.5); }
.appr-view.plein .appr-poignee{ display: none; }

/* Le retour au couloir entier se range sous la coupe, à côté de la lecture
   chiffrée : dans le bandeau du haut il faisait passer le titre à la ligne. */
.appr-lecture-row{
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 2px;
}
.appr-lecture-row .appr-lecture{ flex: 1 1 auto; margin: 0; }
.appr-zoomreset{
  flex: 0 0 auto;
  background: rgba(47,125,224,.92); color:#fff;
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  padding: 5px 10px; font-size: 11.5px; font-weight: 800; font-family: inherit;
  white-space: nowrap;
}
.appr-zoomreset[hidden]{ display: none; }

/* ===== V0.7.4 — écrans bas (téléphone en paysage) =====

   Sur un écran de 393 px de haut, le panneau Pente prenait 222 px : le profil
   DZ, posé au-dessus par le script, et le bouton de validation sortaient par
   le haut. Le banc géométrique le signalait en paysage, et seulement là.

   On borne donc le panneau et on fait défiler ses cartes. Rien n'est masqué :
   ce qui ne tient pas se fait atteindre au doigt. */
@media (max-height: 520px){
  #slopePanel:not(.collapsed){
    max-height: 46dvh;
    display: flex;
    flex-direction: column;
  }
  #slopePanel:not(.collapsed) .cards{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  #slopePanel:not(.collapsed) .footer{ flex: 0 0 auto; }
  .profile-box:not(.collapsed-profile){ height: 112px; }
  /* Les deux commandes d'édition étaient calées à 288 et 350 px du bas : sur
     un écran de 393 px, la première chevauchait le bandeau de recherche et la
     seconde sortait par le haut.

     On les ramène en bas, l'une au-dessus de l'autre, par-dessus les panneaux.
     Elles ne s'affichent que pendant le placement de la DZ, c'est-à-dire avant
     la validation : à ce moment-là le profil et la pente n'ont encore rien à
     montrer, et les recouvrir ne cache aucune mesure. */
  .edit-tools{
    bottom: calc(env(safe-area-inset-bottom,0px) + 10px) !important;
    z-index: 1252;
  }
  .validate-btn, body.panel-collapsed .validate-btn{
    bottom: calc(env(safe-area-inset-bottom,0px) + 74px) !important;
    z-index: 1251;
  }
  /* En paysage, la colonne d'outils descend jusqu'au tiers inférieur et
     recouvrait le bord gauche des deux panneaux du bas — donc leurs titres,
     « Profil DZ » et « Pente LZ ». Ils commencent maintenant après elle. */
  .profile-box, #slopePanel{
    left: calc(env(safe-area-inset-left,0px) + 66px) !important;
  }
}

/* ===== V0.7.5 — chargement de la vue 3D =====

   La vue fine télécharge quatre fois plus de relief. L'attente devient visible,
   donc elle doit être lisible : une barre qui compte des octets reçus, le nom
   de l'étape en cours, et le détail de ce qui est demandé. */
.v3d-progress{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom,0px) + 96px);
  width: min(420px, calc(100vw - 48px));
  background: rgba(7,21,35,.94);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
  z-index: 40;
}
.v3d-progress[hidden]{ display: none; }
.v3d-progress-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 700; color: #e8f1fb;
}
.v3d-progress-head b{ font-variant-numeric: tabular-nums; color: #8fc7ff; }
.v3d-progress-rail{
  margin-top: 8px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.v3d-progress-rail i{
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg,#2f7de0,#63d3ff);
  transition: width .18s linear;
}
.v3d-progress-sub{
  margin-top: 7px; font-size: 11px; color: #9fb4cb;
}
.v3d-progress-sub[hidden]{ display: none; }

/* La colonne de droite porte un groupe de plus depuis la V0.7.5. Sur un écran
   bas — téléphone en paysage — elle dépassait du cadre et le dernier bouton
   devenait inatteignable. Même traitement que la colonne d'outils de la carte :
   bornée et défilante, rien n'est masqué. */
/* 140 px ne suffisaient pas : en paysage sur téléphone, la colonne descendait
   jusque sous la barre Photo / Sursol / Terrain, et « Recentrer » passait
   dessous. La réserve couvre maintenant le bandeau du haut, la barre des modes
   et sa ligne d'aide. */
.v3d-side{
  max-height: calc(100dvh - env(safe-area-inset-top,0px)
                 - env(safe-area-inset-bottom,0px) - 200px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-width: thin;
}
@supports not (height: 100dvh){
  .v3d-side{ max-height: calc(100vh - 200px); }
}

/* ===== V0.8.2 — axe d'approche ===== */

/* Cap d'arrivée : lu sur l'axe de la DZ, saisi sur l'axe libre, toujours dans
   la rangée du choix d'axe. Désigner un point sur la carte va vite, mais une
   consigne se donne en degrés : « vous arrivez au 270 ».

   L'étiquette reste visible dans les deux cas : un cap sans étiquette, à côté
   de deux boutons, se lit de travers, et c'est précisément le sens de lecture
   qu'on vient de corriger. */
.appr-cap-bloc{
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 58px;
}
.appr-cap-lab{
  font-size: 8.5px; font-style: normal; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #6e86a0;
}
.appr-cap-saisie{ display: flex; align-items: center; gap: 2px; }
.appr-cap-saisie[hidden]{ display: none; }
.appr-cap-saisie input{
  width: 58px;
  background: rgba(18,40,61,.95); color: #e8f1fb;
  border: 1px solid rgba(255,255,255,.22); border-radius: 9px;
  padding: 4px 4px; font-size: 15px; font-weight: 800; font-family: inherit;
  text-align: center;
}
.appr-cap-saisie input:focus{ outline: 2px solid rgba(47,125,224,.9); outline-offset: 1px; }
/* Les flèches du champ numérique volent de la largeur sans rien apporter au doigt. */
.appr-cap-saisie input::-webkit-outer-spin-button,
.appr-cap-saisie input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.appr-cap-saisie input[type=number]{ -moz-appearance: textfield; }
.appr-cap-saisie .appr-unite{
  font-size: 12px; font-style: normal; font-weight: 800; color: #9fb4cb;
}

/* En axe libre, on travaille sur la carte : le panneau se fait discret. Rien
   n'est retiré, tout est resserré, et le coût estimé passe sur la ligne du
   bouton plutôt que sur une ligne à lui. */
.appr-bar.libre{ padding: 9px 11px 10px; }
.appr-bar.libre .appr-bar-head{ margin-bottom: 2px; font-size: 12.5px; }
.appr-bar.libre .appr-consigne{ margin: 5px 0 6px; font-size: 10.5px; line-height: 1.3; }
.appr-bar.libre .appr-ligne{ margin: 6px 0 2px; }
.appr-bar.libre .appr-lab,
.appr-bar.libre .appr-val{ font-size: 11px; }
.appr-bar.libre input[type=range]{ margin: 0; }
.appr-bar.libre .appr-cout{ margin: 6px 0 0; font-size: 10px; }
.appr-bar.libre .appr-go{ margin-top: 7px; padding: 9px 12px; font-size: 13px; }
/* Sur l'axe libre, le cap se saisit : l'afficher en plus ferait deux fois le
   même nombre côte à côte. */
.appr-bar.libre #apprCapVal{ display: none; }

/* Encart de résumé repliable.

   Il porte l'essentiel — ce qui dépasse la limite haute, le sursol le plus
   haut, l'obstacle le plus haut — mais sur un demi-écran il mangeait le quart
   de la coupe. Un appui le réduit à sa ligne la plus importante ; un second le
   redéploie. Il ne disparaît jamais : replié, il montre toujours
   l'avertissement, parce qu'un encart orange qu'on peut faire disparaître
   finirait par être fait disparaître. */
.appr-verdict{
  position: relative;
  padding-right: 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.appr-verdict:focus-visible{ outline: 2px solid rgba(47,125,224,.9); outline-offset: 2px; }
.appr-verdict-court{ display: none; }
.appr-verdict.replie .appr-verdict-txt{ display: none; }
.appr-verdict.replie .appr-verdict-court{ display: block; }
.appr-verdict-chev{
  position: absolute; top: 50%; right: 9px;
  transform: translateY(-50%) rotate(0deg);
  font-size: 11px; line-height: 1; color: #9fb4cb;
  transition: transform .15s ease;
  pointer-events: none;
}
.appr-verdict.replie .appr-verdict-chev{ transform: translateY(-50%) rotate(-90deg); }

/* RAZ de l'axe d'approche.

   Séparé du bouton « Calculer » par la position, la taille et la couleur :
   il défait ce que l'autre vient de faire, et les deux ne doivent jamais se
   confondre sous le gant. Il n'apparaît que lorsqu'il y a quelque chose à
   effacer — sans quoi il proposerait d'annuler le néant. */
.appr-pied{ display: flex; align-items: center; gap: 10px; }
.appr-pied .appr-cout{ flex: 1 1 auto; min-width: 0; }
.appr-raz{
  flex: 0 0 auto;
  min-width: 52px;
  padding: 7px 12px;
  background: rgba(255,91,87,.10);
  color: #ff9d9a;
  border: 1px solid rgba(255,91,87,.45);
  border-radius: 9px;
  font-size: 11.5px; font-weight: 800; font-family: inherit;
  letter-spacing: .04em;
}
.appr-raz[hidden]{ display: none; }
.appr-raz:active{ background: rgba(255,91,87,.22); }

/* ===== V0.8.5 — les deux listes de la vue 3D ne se chevauchent plus =====

   Le bandeau d'informations n'avait aucune largeur maximale : il grandissait
   avec son contenu, et les lignes ajoutées en V0.8.0 et V0.8.4 l'ont poussé
   sous la colonne de commandes. Sur téléphone, les valeurs passaient derrière
   les boutons — « Pente LZ 10.6 », « Canopée lissée 254 points sur 3×3 (dess »
   — c'est-à-dire exactement les chiffres qu'on vient y chercher.

   Il s'arrête désormais avant la colonne. Les deux se replient ensemble au
   bouton ›, donc il n'existe pas d'état où l'un serait seul à l'écran et
   pourrait reprendre la place. */
.v3d-info{
  max-width: calc(100vw - env(safe-area-inset-left,0px)
                  - env(safe-area-inset-right,0px) - 24px - 134px);
  box-sizing: border-box;
}
/* Une ligne trop longue passe à la ligne au lieu d'être tronquée : mieux vaut
   deux lignes lisibles qu'une ligne coupée au milieu d'un nombre. */
.v3d-info div{ flex-wrap: wrap; }
.v3d-info div > span:first-child{ flex: 0 1 auto; min-width: 0; }
.v3d-info b{ flex: 0 0 auto; text-align: right; }

@media (max-width: 420px){
  .v3d-info{ padding: 8px 10px; }
  .v3d-info div{ font-size: 11px; gap: 8px; }
}

/* ===== V0.9.1 — coordonnées et Analyse sur une seule ligne =====

   Les deux occupaient deux bandes superposées sous la barre de recherche, et
   mangeaient à elles seules un cinquième de la carte sur un téléphone. Elles
   partagent maintenant une rangée : les coordonnées à gauche, l'Analyse à sa
   droite, le tout calé à droite de l'écran.

   La rangée ne capte pas les appuis — seuls ses deux occupants le font — pour
   que la carte reste manipulable dans l'espace vide à leur gauche. */
.info-row{
  position: absolute;
  z-index: 1000;
  /* La rangée commence après la colonne d'outils, qui occupe la même hauteur
     d'écran : sans cette réserve, les coordonnées passaient sous les boutons
     de zoom. */
  left: calc(env(safe-area-inset-left,0px) + 66px);
  right: calc(env(safe-area-inset-right,0px) + 18px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}
.info-row > *{ pointer-events: auto; }

/* Les deux panneaux cessent d'être positionnés pour eux-mêmes : c'est la
   rangée qui porte la position. Les anciennes règles en !important, et celles
   que le script écrivait, deviennent sans effet sur un élément statique —
   d'où la remise à zéro explicite, pour qu'il n'en reste rien. */
.info-row > #coordBox,
.info-row > #analysisBox{
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
}
/* Les coordonnées prennent la largeur qu'il leur faut et ne se replient sur
   deux lignes que si la place manque vraiment. Un plafond en pourcentage les
   coupait alors qu'il restait de la place à côté. */
.info-row > #coordBox{ flex: 0 1 auto; }
.info-row > #analysisBox{
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: 360px;
}
/* Le résumé se réduit par les points de suspension plutôt que de pousser la
   boîte au-delà de la rangée. */
.analysis-head .summary{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dépliée sur un écran étroit, l'Analyse passe sous les coordonnées et prend
   toute la largeur : une liste de motifs lue dans une colonne de deux cent
   trente pixels ne se lit pas. Repliée — son état courant, celui qui occupe
   l'écran — elle reste sur la ligne des coordonnées, comme demandé. */
@media (max-width: 560px){
  .info-row{ flex-wrap: wrap; }
  .info-row > #analysisBox:not(.collapsed){ flex: 1 1 100%; max-width: none; }
  /* Repliée, l'Analyse n'affiche qu'une pastille et son titre : elle n'a pas
     besoin des cent cinquante pixels fixes qu'elle réservait, et les rendre
     laisse les coordonnées tenir sur une seule ligne. */
  .info-row > #analysisBox.collapsed{
    width: auto !important;
    min-width: 0 !important;
    max-width: 58% !important;
  }
}

/* ===== V0.9.1 — le Profil DZ est devenu facultatif =====

   Le panneau occupait en permanence une bande du bas, même quand on ne le
   regardait pas. Il s'appelle maintenant par son bouton dans la colonne
   d'outils, et il part aussi par lui. Son état est conservé d'une séance à
   l'autre : qui s'en sert tout le temps ne le rouvre qu'une fois. */
.profile-box.masque{ display: none !important; }
.controls .profil-btn.on{
  background: #2f7de0 !important;
  border-color: rgba(255,255,255,.35) !important;
  color: #fff !important;
}

/* ===== V0.9.2 — le panneau Pente devient facultatif lui aussi ===== */
#slopePanel.masque{ display: none !important; }
.controls .pente-btn.on{
  background: #2f7de0 !important;
  border-color: rgba(255,255,255,.35) !important;
  color: #fff !important;
}

/* ===== V0.9.3 — boussole de la vue 3D ===== */
.v3d-compas{
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: 0; padding: 0 2px 0 0;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.v3d-compas svg{ display: block; width: 44px; height: 44px; }
/* Pas de transform-origin ici : l'attribut SVG « rotate(angle cx cy) » porte
   déjà son centre. Les deux se cumulaient — la rose tournait autour de (48,48)
   au lieu de (24,24), sortait du cadre de 48 par 48, et disparaissait. Le
   cercle restait, donc la boussole paraissait seulement vide. */
.v3d-cap{
  font-size: 13px; font-weight: 800; color: #e8f1fb;
  min-width: 36px; text-align: left; letter-spacing: .01em;
}
.v3d-compas:focus-visible{ outline: 2px solid rgba(47,125,224,.9); outline-offset: 3px; }
@media (max-width: 420px){
  .v3d-compas svg{ width: 38px; height: 38px; }
  .v3d-cap{ font-size: 12px; min-width: 32px; }
}

/* ===== V1.0 — nouveautés dans la carte d'ouverture =====

   La carte peut maintenant dépasser la hauteur d'un petit écran. Elle devient
   donc une colonne : seules les nouveautés défilent, le bouton « J'ai compris »
   reste visible. Sans ça, sur un téléphone en paysage, le bouton passerait sous
   le bord de l'écran et la carte serait impossible à fermer. */
.startup-warning-card{
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}
.startup-warning-card > *{
  flex: 0 0 auto;
}
.startup-news{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 14px 0 2px;
  padding: 12px 13px 11px;
  border-radius: 12px;
  text-align: left;
  background: rgba(99,211,61,.10);
  border: 1px solid rgba(99,211,61,.38);
}
.startup-news-title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #8fe36b;
  margin-bottom: 9px;
  text-align: center;
}
.startup-news-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.startup-news-list li{
  display: flex;
  align-items: center;
  gap: 11px;
}
/* Pastille aux dimensions du bouton réel, pour que le rapprochement se fasse
   sans y penser. */
.startup-news-icon{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(7,21,35,.92);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
}
.startup-news-3d{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .5px;
}
.startup-news-text{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #eef4f9;
}
.startup-news-divers{
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  line-height: 1.35;
  color: #c9d3dc;
}
.startup-news-divers b{
  color: #eef4f9;
}

/* Écran bas — téléphone en paysage, clavier ouvert, petite tablette.
   Sans ça, la carte réservait toute sa hauteur à l'avertissement et les
   nouveautés se réduisaient à leur titre : présent, donc « correct », et
   pourtant illisible. Tout est resserré pour qu'au moins deux lignes se
   voient, le reste défilant sous le doigt. */
@media (max-height: 470px){
  .startup-warning{
    padding-top: calc(env(safe-area-inset-top,0px) + 10px);
    padding-bottom: calc(env(safe-area-inset-bottom,0px) + 10px);
  }
  .startup-warning-card{
    width: min(560px,calc(100vw - 32px));
    padding: 12px 16px 12px;
  }
  .startup-warning-icon{
    width: 28px; height: 28px; font-size: 19px; margin-bottom: 5px;
  }
  .startup-warning-title{ font-size: 16px; margin-bottom: 5px; }
  .startup-warning-text{ font-size: 13px; line-height: 1.3; margin-bottom: 7px; }
  .startup-current-version{ margin-top: 3px; font-size: 11px; }
  .startup-news{ margin: 8px 0 2px; padding: 9px 11px 9px; }
  .startup-news-title{ margin-bottom: 7px; }
  .startup-news-list{ gap: 7px; }
  .startup-news-icon{ width: 28px; height: 28px; border-radius: 7px; }
  .startup-news-icon svg{ width: 20px; height: 20px; }
  .startup-news-3d{ font-size: 12px; }
  .startup-news-text{ font-size: 12.5px; }
  .startup-news-divers{ margin-top: 7px; padding-top: 6px; font-size: 11.5px; }
  .startup-warning button{ height: 40px; font-size: 14px; }
  .startup-update-notice{ margin: 8px 0 2px; padding: 8px; }
}