/* Compléments de l'application (les styles des maquettes sont dans style.css et screens.css) :
   champs de saisie réels dans les champs dessinés, boutons natifs, états, tiroir du menu, safe-area. */
button.btn{border:0;cursor:pointer;font-family:inherit}
button.btn.s,button.btn.o{border:1px solid #D5DCE7}
button.btn:disabled,button.btn.off{background:#E3E8F0;color:#A6A6A6;box-shadow:none;border:0;cursor:not-allowed}
button.btn.s:disabled{background:#F7F9FC;color:#A6A6A6;border:1px solid #E3E8F0}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px}
a.btn{cursor:pointer}
[role=button]{cursor:pointer}
.ax-f input,.ax-f select,.fld input,.fld select,.fld textarea,.ax-f textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:#0E1A2E;font-weight:600;padding:6px 0}
.ax-f input::placeholder,.fld input::placeholder,.fld textarea::placeholder,.ax-f textarea::placeholder{color:#8D94A3;font-weight:500}
.ax-f:focus-within{border:2px solid #0B1E3F;padding:0 11px}
.fld:focus-within{border:2px solid #0B1E3F;padding:0 11px}
.fld{color:#0E1A2E}
.fld.ta{height:auto;min-height:72px;align-items:flex-start;padding:8px 12px}
.fld.ta textarea{resize:vertical;min-height:56px}
.ax-otp input{height:54px;border-radius:12px;border:1px solid #D5DCE7;background:#fff;text-align:center;font:800 23px/1 inherit;font-family:inherit;min-width:0;width:100%;color:#0E1A2E}
.ax-otp input:focus{outline:0;border:2px solid #0B1E3F}
.ax-otp.bad input{border:2px solid #D22F00;background:#FFF1EC;color:#D22F00}
.otp-one{letter-spacing:14px;text-align:center;font-size:22px!important;font-weight:800!important}
.st-box{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:4px}
.st-spin{width:22px;height:22px;border-radius:50%;border:3px solid #E3E8F0;border-top-color:#0B1E3F;animation:stspin 1s linear infinite}
@keyframes stspin{to{transform:rotate(360deg)}}
.net-bar{position:sticky;top:0;z-index:60;background:#FFF6E5;border-bottom:1px solid #F4D9A6;color:#B45309;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px;padding:8px 24px}
.side.open{display:flex!important;position:fixed;z-index:70;left:0;top:0;bottom:0;width:260px;overflow:auto}
.side.open .nav i,.side.open .nav span:not(.n):not(.ico2){display:inline}
.side.open .nav{justify-content:flex-start;padding:3px 10px}
.side.open .box{display:flex!important}
.drawer-scrim{position:fixed;inset:0;background:rgba(8,25,53,.45);z-index:65}
.tabbar{padding-bottom:env(safe-area-inset-bottom,0px);height:calc(64px + env(safe-area-inset-bottom,0px))}
.ax{padding-top:max(36px,env(safe-area-inset-top,0px))}
.scrim.fx{position:fixed}
.modal.fx{position:fixed;left:50%;top:60px;transform:translateX(-50%);width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 90px);overflow:auto}
.modal.fx.w{width:min(760px,calc(100vw - 32px))}
.gap-note{font-size:11px;font-weight:600;color:#8D94A3;margin-top:6px;line-height:1.45}
.secret{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;word-break:break-all;background:#0E1A2E;color:#fff;border-radius:10px;padding:12px 14px}
.mono{font-family:ui-monospace,Menlo,monospace}
.chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.chk input{margin-top:2px;width:17px;height:17px;accent-color:#0B1E3F;flex:none}
.seg span[role=button]{cursor:pointer}
.clickrow{cursor:pointer}
.clickrow:hover{border-color:#B9C3D3}
@media (max-width:700px){.net-bar{padding:8px 16px}.modal.fx{top:16px;max-height:calc(100vh - 32px)}}
/* Le menu latéral descend sur toute la hauteur de la page (captures pleine page comprises). */
@media (min-width:701px){.app>.side{align-self:stretch}}
.map-box{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#A9D8E4}
.map-g,.map-base{position:absolute;inset:0}
.map-base svg{width:100%;height:100%}
.map-note{position:absolute;left:12px;top:12px;height:26px;box-shadow:0 2px 8px rgba(8,25,53,.15)}
.otp-wrap{position:relative}
.otp-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:text}
.ax-f>span[role=button]{flex:none;display:flex}
.side .box a{color:inherit}
/* pastille d'étape (retours au site, 029) */
.e2-n{width:26px;height:26px;border-radius:50%;background:#0B1E3F;color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.e2-n.g{background:#087C4E}.e2-n.ok{background:#E1F8ED;color:#087C4E}
.e2-photo{width:100%;max-width:460px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:#EEF1F6}

/* Téléphone (390 px) : aucun débordement horizontal. Les cartes et les éléments de grille peuvent
   rétrécir ; les valeurs longues (clés, en-têtes, adresses, identifiants) passent à la ligne ; les
   tableaux défilent dans leur propre cadre. */
.card, .kpi, .g2 > *, .g3 > *, .g4 > *, .gs > *, .grid > * { min-width: 0; }
.mono, .tt, .ts, .e2-li b, .e2-li span { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .e2-li { flex-wrap: wrap; gap: 4px 12px; }
  .e2-li b { text-align: left; white-space: normal; }
  .card pre, .card code { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* Bouton principal en bleu Rapidos #1877F2 (charte), plus en bleu marine. */
.btn { background: #1877F2; box-shadow: 0 4px 12px rgba(24, 119, 242, .25); }
.btn:hover { background: #0F5FD1; }
.btn.s, .btn.o { background: #fff; }
.btn.s:hover, .btn.o:hover { background: #F4F7FB; }
.btn.gn { background: #0FA958; } .btn.rdb { background: #D22F00; }
.btn.off { background: #E3E8F0; }