/* Gestion Maarifa — présentation sur téléphone (en plus de app.css) */
#tabbar{display:none}
.lgbtn2{margin-top:10px;width:100%;border-radius:14px;padding:14px;border:1.5px solid #222;background:#fff;color:#222;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.phone-box{margin-top:18px;border-top:1px solid #E6E3DC;padding-top:14px;display:flex;flex-direction:column;gap:10px}
.phone-box .note{margin:0}
.phone-box .btn{width:100%}
@media(max-width:860px){
  /* barre de navigation du bas, façon application */
  #tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid #E6E3DC;padding:6px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.06)}
  body.guest #tabbar{display:none}
  #tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border:0;background:transparent;color:#6b6558;font:inherit;font-size:11px;font-weight:600;border-radius:14px;cursor:pointer;padding:4px 2px;min-width:0}
  #tabbar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #tabbar button.on{background:#FFF3D1;color:#222}
  #tabbar svg{width:22px;height:22px}
  /* le contenu ne passe pas sous la barre */
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
  /* plein écran : pas de zone blanche en haut sur iPhone */
  header{padding-top:calc(8px + env(safe-area-inset-top))}
  /* boutons assez grands pour le doigt */
  .btn{min-height:44px}
  input,select,textarea{min-height:44px}
}

/* ===== style de la maquette « version mobile » (téléphone uniquement) ===== */
@font-face{font-family:"Fira Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/fira-sans-400.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/fira-sans-500.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/fira-sans-600.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/fira-sans-700.woff2) format("woff2")}
@media(max-width:860px){
  :root{--mk-ink:#222222;--mk-ink2:#5C5A55;--mk-yel:#FFC430;--mk-bg:#F6F5F2;--mk-line:#E6E3DC}
  html,body,#main,main{background:var(--mk-bg)!important;font-family:"Fira Sans",system-ui,sans-serif!important;color:var(--mk-ink)}
  header{background:var(--mk-bg)!important;box-shadow:none!important;border:0!important}
  /* cartes blanches, arrondies, sans bordure */
  .card{background:#fff!important;border:0!important;border-radius:18px!important;box-shadow:none!important;padding:16px!important}
  /* boutons : principal jaune, secondaire contour noir */
  .btn{border-radius:14px!important;font-family:inherit!important;font-weight:600;border:1.5px solid var(--mk-ink)!important;background:#fff!important;color:var(--mk-ink)!important;min-height:48px}
  .btn.p{background:var(--mk-yel)!important;border-color:var(--mk-yel)!important;color:var(--mk-ink)!important;font-weight:700}
  .btn.s{min-height:40px}
  input,select,textarea{border-radius:14px!important;border:1.5px solid #D9D6CF!important;background:#fff!important;font-family:inherit!important}
  /* écran de connexion : une seule colonne, comme la maquette */
  .lgcard{background:transparent!important;box-shadow:none!important;border:0!important}
  .lgleft{display:none!important}
  .lgbg{background:var(--mk-bg)!important}
  #clock,#hideBtn{display:none!important}
  .lgright{background:var(--mk-bg)!important;padding:56px 24px 32px!important}
  .lgright h2{font-size:32px!important;line-height:1.15;font-weight:700;margin:56px 0 8px}
  .lgright .note{font-size:16px;color:var(--mk-ink2);line-height:1.45}
  .lgright .lglogo{height:44px}
  .lgbtn{background:var(--mk-yel)!important;color:var(--mk-ink)!important;box-shadow:none!important;border-radius:16px!important;font-size:17px;padding:16px;letter-spacing:0}
  .lgf{border-radius:14px!important;border:1.5px solid #D9D6CF!important;background:#fff!important;height:54px}
  .lgf span{display:none}
  .lglinks a{color:var(--mk-ink);text-decoration:underline}
  .lgbtn2{border-radius:16px;height:54px}
  /* barre du bas : pastille jaune sous l'onglet actif, comme la maquette */
  #tabbar{background:#fff!important;border-top:1px solid var(--mk-line)!important;box-shadow:none!important;padding-top:8px!important}
  #tabbar button{isolation:isolate;position:relative;color:#8A877F!important;font-size:11.5px!important;font-weight:500!important;background:transparent!important}
  #tabbar button::before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:52px;height:30px;border-radius:15px;background:transparent;z-index:-1}
  #tabbar button.on{color:var(--mk-ink)!important;font-weight:700!important}
  #tabbar button.on::before{background:var(--mk-yel)}
  #tabbar button.on svg{position:relative;top:0}
  /* tiroir « Plus » : ouvert depuis la barre */
  #side{background:#fff}
  #menu button.on{background:var(--mk-yel)!important;color:var(--mk-ink)!important;box-shadow:none!important}
  #menu button.on .ic{filter:none}
}