:root{
    --ink:#0F3A63;
    --ink-soft:#184F82;
    --paper:#FFFFFF;
    --paper-dim:#EAF1F8;
    --brass:#EC7A2B;
    --brass-soft:#FBDEC2;
    --teal:#1E6FBF;
    --teal-soft:#DDEBFA;
    --clay:#D95F1E;
    --clay-soft:#FBE0CB;
    --slate:#5C7590;
    --line:#D6E3EE;
    --white:#FFFFFF;
    --radius:2px;
  }

  /* ===== Mode sombre ===== */
  body.dark-mode{
    --paper:#12181F;
    --paper-dim:#1A222C;
    --white:#1E2732;
    --line:#2C3844;
    --slate:#8CA0B3;
    color:#EAF1F8;
    background:var(--paper);
  }
  body.dark-mode .sidebar{background:#0A0F16;}
  body.dark-mode .modal-overlay{background:rgba(0,0,0,.65);}
  body.dark-mode input, body.dark-mode select, body.dark-mode textarea{
    background:var(--white); color:#EAF1F8; border-color:var(--line);
  }
  body.dark-mode table tr:hover{background:var(--paper-dim);}
  body.dark-mode .panel table tr{background:var(--white);}
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter', sans-serif;
    background:var(--paper);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em;}
  .mono{font-family:'JetBrains Mono', monospace;}

  /* corner-tick signature motif — blueprint corner marks */
  .tick{position:relative;}
  .tick::before,.tick::after{
    content:''; position:absolute; width:9px; height:9px;
    border-color:var(--brass); border-style:solid; opacity:.85;
  }
  .tick::before{ top:-1px; left:-1px; border-width:1.5px 0 0 1.5px; }
  .tick::after{ bottom:-1px; right:-1px; border-width:0 1.5px 1.5px 0; }

  /* ===== App shell ===== */
  .shell{display:flex; min-height:100vh;}
  .sidebar{
    width:230px; background:var(--ink); color:var(--paper);
    display:flex; flex-direction:column; flex-shrink:0;
  }

  /* ===================== BIBLIOTHÈQUE DE STYLES — MENU LATÉRAL DESKTOP (6 modèles) ===================== */
  /* 1. classic (par défaut) — aucune classe supplémentaire */

  /* 2. compact — plus étroit, densité augmentée */
  .sidebar.style-compact{width:180px;}
  .sidebar.style-compact nav button{padding:9px 12px; font-size:12px;}
  .sidebar.style-compact .brand-name{font-size:16px;}

  /* 3. light — fond clair au lieu de la marine sombre */
  .sidebar.style-light{background:var(--paper-dim); color:var(--ink); border-right:1px solid var(--line);}
  .sidebar.style-light nav button{color:var(--ink);}
  .sidebar.style-light nav button:hover{background:rgba(15,58,99,.06);}
  .sidebar.style-light nav button.active{background:var(--white); color:var(--ink); box-shadow:0 1px 4px rgba(15,58,99,.12);}
  .sidebar.style-light .sidebar-foot{color:var(--slate); border-top-color:var(--line);}
  .sidebar.style-light .role-switch label{color:var(--slate);}

  /* 4. gradient — dégradé vertical */
  .sidebar.style-gradient{background:linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);}

  /* 5. rounded-items — boutons de nav en pastille arrondie */
  .sidebar.style-rounded-items nav{padding:8px 10px;}
  .sidebar.style-rounded-items nav button{border-radius:12px; margin-bottom:2px;}
  .sidebar.style-rounded-items nav button.active{border-radius:12px;}

  /* 6. bordered — fine bordure d'accent à droite, fond légèrement différent */
  .sidebar.style-bordered{border-right:3px solid var(--brass);}
  .brand{
    padding:26px 22px 20px; border-bottom:1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; gap:10px;
  }
  .brand-mark{
    width:26px; height:26px; border:1.5px solid var(--brass); border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .brand-mark::before{ content:''; width:5px; height:5px; background:var(--brass); border-radius:50%; }
  .brand-name{font-family:'Fraunces', serif; font-size:19px; font-weight:600; letter-spacing:.01em;}
  .brand-sub{font-size:10px; color:var(--brass-soft); letter-spacing:.14em; text-transform:uppercase; margin-top:1px;}

  .role-switch{padding:16px 18px 10px;}
  .role-switch label{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.45); display:block; margin-bottom:7px;}
  .role-switch select{
    width:100%; background:var(--ink-soft); color:var(--paper); border:1px solid rgba(255,255,255,.18);
    padding:9px 10px; font-family:'Inter'; font-size:13px; border-radius:var(--radius);
  }

  nav{padding:8px 12px; display:flex; flex-direction:column; gap:2px; flex:1;}
  nav button{
    all:unset; cursor:pointer; padding:10px 10px; border-radius:var(--radius);
    font-size:13.5px; color:rgba(255,255,255,.72); display:flex; align-items:center; gap:10px;
    transition:background .15s, color .15s;
  }
  nav button .dot{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.3); flex-shrink:0;}
  nav button:hover{background:rgba(255,255,255,.06); color:var(--paper);}
  nav button.active{background:var(--ink-soft); color:var(--paper); font-weight:500;}
  nav button.active .dot{background:var(--brass);}

  .sidebar-foot{padding:16px 22px 20px; border-top:1px solid rgba(255,255,255,.12); font-size:11.5px; color:rgba(255,255,255,.4);}

  .main{flex:1; min-width:0; overflow-x:hidden;}
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 34px; border-bottom:1px solid var(--line); background:var(--white);
  }
  .topbar h1{font-size:22px;}
  .topbar-meta{font-size:12px; color:var(--slate);}
  .content{padding:30px 34px 60px;}
  .screen{display:none;}
  .screen.active{display:block; animation:screenFadeIn .18s ease-out;}
  @keyframes screenFadeIn{
    from{ opacity:0; transform:translateY(4px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ===== shared bits ===== */
  .kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;}
  .kpi{background:var(--white); border:1px solid var(--line); padding:18px 18px 16px;}
  .kpi-label{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--slate);}
  .kpi-val{font-family:'JetBrains Mono'; font-size:26px; font-weight:600; margin-top:8px;}
  .kpi-delta{font-size:11.5px; margin-top:6px; color:var(--teal);}
  .kpi-delta.down{color:var(--clay);}

  .panel{background:var(--white); border:1px solid var(--line); padding:22px 24px; margin-bottom:20px;}
  .panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .panel-head h3{font-size:16px;}
  .link{color:var(--teal); font-size:12.5px; text-decoration:none; font-weight:500;}

  .badge{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:11px;
    border-radius:20px; font-weight:600; letter-spacing:.02em;
  }
  .badge::before{content:''; width:5px; height:5px; border-radius:50%;}
  .badge.ok{background:var(--teal-soft); color:var(--teal);} .badge.ok::before{background:var(--teal);}
  .badge.warn{background:var(--clay-soft); color:var(--clay);} .badge.warn::before{background:var(--clay);}
  .badge.wait{background:var(--brass-soft); color:#8A4212;} .badge.wait::before{background:var(--brass);}
  .badge.off{background:#E4ECF3; color:var(--slate);} .badge.off::before{background:var(--slate);}

  table{width:100%; border-collapse:collapse;}
  th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); font-weight:600; padding:0 10px 10px; border-bottom:1px solid var(--line);}
  td{padding:13px 10px; border-bottom:1px solid var(--paper-dim); font-size:13.5px; vertical-align:middle;}
  tr:last-child td{border-bottom:none;}

  .btn{
    all:unset; cursor:pointer; padding:10px 18px; font-size:13px; font-weight:600;
    border-radius:var(--radius); text-align:center; letter-spacing:.01em;
  }
  .btn.brass{background:var(--ink); color:var(--paper);}
  .btn.brass:hover{background:var(--ink-soft);}
  .btn.ghost{border:1px solid var(--line); color:var(--ink);}
  .btn.ghost:hover{background:var(--paper-dim);}
  .btn.sm{padding:6px 12px; font-size:12px;}

  /* Dashboard gestionnaire */
  .task-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--paper-dim);}
  .task-row:last-child{border-bottom:none;}
  .task-check{width:16px; height:16px; border:1.5px solid var(--brass); border-radius:3px; flex-shrink:0;}
  .task-title{font-size:13.5px; font-weight:500;}
  .task-meta{font-size:11.5px; color:var(--slate); margin-top:2px;}

  /* Fiche bien */
  .prop-hero{display:grid; grid-template-columns:1.3fr 1fr; gap:22px;}
  .photo-grid{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:8px; height:280px;}
  .photo{background:linear-gradient(135deg, var(--teal-soft), var(--brass-soft)); border:1px solid var(--line);}
  .photo:first-child{grid-row:1/3;}
  .prop-title{font-size:25px; margin-bottom:4px;}
  .prop-loc{color:var(--slate); font-size:13px; margin-bottom:16px;}
  .price-tag{
    display:flex; align-items:baseline; gap:6px; background:var(--ink); color:var(--paper);
    padding:16px 18px; margin-bottom:18px;
  }
  .price-tag .amt{font-family:'JetBrains Mono'; font-size:24px; font-weight:600; color:var(--brass);}
  .price-tag .unit{font-size:12px; color:rgba(255,255,255,.6);}
  .loc-row{display:flex; align-items:flex-start; gap:9px; margin-bottom:14px;}
  .loc-pin{width:9px; height:9px; border-radius:50% 50% 50% 0; background:var(--clay); transform:rotate(-45deg); margin-top:5px; flex-shrink:0;}
  .loc-pin.sm{width:7px; height:7px; margin-top:4px;}
  .loc-addr{font-size:13px; color:var(--ink); margin-bottom:2px;}
  .map-placeholder{
    height:110px; margin-bottom:16px; background-image:
      linear-gradient(var(--teal-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--teal-soft) 1px, transparent 1px);
    background-size:16px 16px; background-color:var(--paper-dim);
    border:1px solid var(--line); position:relative;
  }
  .map-placeholder::before{
    content:''; position:absolute; top:50%; left:50%; width:12px; height:12px;
    background:var(--clay); border-radius:50% 50% 50% 0; transform:translate(-50%,-70%) rotate(-45deg);
    box-shadow:0 0 0 3px rgba(169,83,47,.15);
  }
  .land-card{display:flex; gap:16px; align-items:flex-start;}
  .land-card .photo{flex-shrink:0; width:150px;}
  .equip-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px;}
  .equip-item{border:1px solid var(--line); padding:10px 12px; font-size:12.5px; display:flex; justify-content:space-between; align-items:center;}
  .equip-state{width:7px; height:7px; border-radius:50%; background:var(--teal); flex-shrink:0;}
  .equip-state.warn{background:var(--clay);}

  /* Calendrier */
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .cal-day{background:var(--white); min-height:74px; padding:6px 7px; font-size:11.5px;}
  .cal-day .num{font-family:'JetBrains Mono'; font-size:12px; color:var(--slate);}
  .cal-day.booked{background:var(--teal-soft);}
  .cal-day.booked .num{color:var(--teal); font-weight:700;}
  .cal-day.maint{background:var(--clay-soft);}
  .cal-day.hdr{background:transparent; min-height:auto; padding:0 7px 8px; font-weight:600; text-transform:uppercase; font-size:10.5px; letter-spacing:.08em; color:var(--slate);}
  .legend{display:flex; gap:18px; margin-top:14px; font-size:12px; color:var(--slate);}
  .legend span{display:flex; align-items:center; gap:6px;}
  .legend i{width:10px; height:10px; display:inline-block;}

  /* Espace locataire */
  .booking-flow{display:grid; grid-template-columns:1fr 300px; gap:22px;}
  .steps{display:flex; gap:0; margin-bottom:22px;}
  .step{flex:1; padding-bottom:10px; border-bottom:2px solid var(--line); font-size:12px; color:var(--slate); position:relative;}
  .step.done{border-color:var(--teal); color:var(--teal); font-weight:600;}
  .step.now{border-color:var(--brass); color:var(--ink); font-weight:600;}
  .pay-method{display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:12px 14px; margin-bottom:8px; font-size:13px; cursor:pointer;}
  .pay-method.sel{border-color:var(--brass); background:#FEF3EA;}
  .pay-dot{width:16px; height:16px; border-radius:50%; border:1.5px solid var(--slate); flex-shrink:0;}
  .pay-method.sel .pay-dot{border-color:var(--brass); background:radial-gradient(var(--brass) 40%, transparent 44%);}
  .summary-line{display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid var(--paper-dim);}
  .summary-line.total{font-weight:700; font-size:15px; border-bottom:none; padding-top:12px;}

  /* Admin */
  .settings-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
  .toggle-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--paper-dim);}
  .toggle-row:last-child{border-bottom:none;}
  .toggle-label{font-size:13px; font-weight:500;}
  .toggle-desc{font-size:11.5px; color:var(--slate); margin-top:2px;}
  .switch{width:36px; height:20px; border-radius:20px; background:var(--line); position:relative; flex-shrink:0;}
  .switch.on{background:var(--teal);}
  .switch::after{content:''; width:16px; height:16px; background:var(--white); border-radius:50%; position:absolute; top:2px; left:2px; transition:left .15s;}
  .switch.on::after{left:18px;}
  .field{margin-bottom:14px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); display:block; margin-bottom:6px;}
  .field input{width:100%; border:1px solid var(--line); padding:9px 10px; font-size:13px; font-family:'JetBrains Mono';}

  /* ===== Hamburger (mobile uniquement) ===== */
  .hamburger-btn{display:none; flex-direction:column; justify-content:center; gap:4px; width:34px; height:34px; border:none; background:var(--paper-dim); border-radius:9px; cursor:pointer; margin-right:4px; flex-shrink:0;}
  .hamburger-btn span{display:block; width:16px; height:1.6px; background:var(--ink); margin:0 auto;}

  .sidebar-backdrop{display:none;}

  /* ===== Barre d'onglets mobile (bottom tab bar) ===== */
  .tabbar{display:none;}
  .tab-item{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex:1; padding:8px 2px 6px; color:var(--slate); text-decoration:none; cursor:pointer; border-radius:14px; transition:background .15s;}
  .tab-item svg{width:20px; height:20px; stroke:var(--slate); fill:none; stroke-width:1.8; transition:stroke .15s;}
  .tab-item span{font-size:9.5px; font-weight:600; line-height:1;}
  .tab-item.active{color:var(--brass); background:var(--brass-soft);}
  .tab-item.active svg{stroke:var(--brass); fill:var(--brass);}

  /* ===================== BIBLIOTHÈQUE DE STYLES — BARRE D'ONGLETS MOBILE (10 modèles) ===================== */
  /* 1. classic (par défaut) — aucune classe supplémentaire nécessaire */

  /* 2. floating — flottante arrondie, détachée des bords */
  .tabbar.style-floating{left:14px !important; right:14px !important; bottom:14px !important; border-radius:22px; border-top:none; box-shadow:0 14px 28px -10px rgba(15,58,99,.35) !important;}

  /* 3. sliding-pill — indicateur qui glisse (la pastille est injectée en JS) */
  .tabbar.style-sliding-pill{position:fixed;}
  .tabbar.style-sliding-pill .slide-pill{position:absolute; top:8px; bottom:8px; background:var(--brass-soft); border-radius:14px; transition:left .25s cubic-bezier(.4,0,.2,1), width .25s; z-index:1;}
  .tabbar.style-sliding-pill .tab-item{position:relative; z-index:2;}

  /* 4. embedded-fab — le FAB descend s'encastrer dans la barre */
  .tabbar.style-embedded-fab{padding-left:38px; padding-right:38px;}
  body.fab-style-embedded .fab{bottom:calc(28px + env(safe-area-inset-bottom)) !important; border:4px solid var(--paper-dim); width:52px; height:52px; border-radius:50%;}

  /* 5. minimal-icons — icônes seules, sans texte */
  .tabbar.style-minimal-icons{height:auto; padding-top:10px !important; padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;}
  .tabbar.style-minimal-icons .tab-item span{display:none;}
  .tabbar.style-minimal-icons .tab-item svg{width:23px; height:23px;}
  .tabbar.style-minimal-icons .tab-item::after{content:''; display:block; width:4px; height:4px; border-radius:50%; margin-top:5px; background:transparent;}
  .tabbar.style-minimal-icons .tab-item.active::after{background:var(--brass);}

  /* 6. glass — effet verre dépoli */
  .tabbar.style-glass{background:rgba(255,255,255,.55) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid rgba(255,255,255,.4);}

  /* 7. dark — barre sombre contrastée */
  .tabbar.style-dark{background:var(--ink) !important; border-top:none;}
  .tabbar.style-dark .tab-item{color:rgba(255,255,255,.55);}
  .tabbar.style-dark .tab-item svg{stroke:rgba(255,255,255,.55);}
  .tabbar.style-dark .tab-item span{color:rgba(255,255,255,.55);}
  .tabbar.style-dark .tab-item.active{background:rgba(236,122,43,.18);}
  .tabbar.style-dark .tab-item.active svg{stroke:var(--brass); fill:var(--brass);}
  .tabbar.style-dark .tab-item.active span{color:var(--brass);}

  /* 8. outline-active — contour au lieu d'un fond plein */
  .tabbar.style-outline-active .tab-item.active{background:none; border:1.5px solid var(--brass);}

  /* 9. underline — trait sous l'onglet actif */
  .tabbar.style-underline .tab-item.active{background:none; border-radius:0;}
  .tabbar.style-underline .tab-item.active::before{content:''; position:absolute; bottom:0; left:18%; right:18%; height:3px; background:var(--brass); border-radius:3px 3px 0 0;}
  .tabbar.style-underline .tab-item{position:relative;}

  /* 10. compact — barre très fine, gain de place */
  .tabbar.style-compact{height:auto; padding-top:5px !important; padding-bottom:calc(5px + env(safe-area-inset-bottom)) !important;}
  .tabbar.style-compact .tab-item{padding-top:4px; padding-bottom:2px;}
  .tabbar.style-compact .tab-item svg{width:17px; height:17px;}
  .tabbar.style-compact .tab-item span{font-size:8.5px;}

  /* 11. elevated-center — onglet actif surélevé avec pastille ronde */
  .tabbar.style-elevated-center .tab-item.active{background:none; transform:translateY(-8px);}
  .tabbar.style-elevated-center .tab-item.active svg{
    background:var(--brass); border-radius:50%; padding:8px; width:34px; height:34px; box-sizing:border-box;
    stroke:#fff; fill:none; box-shadow:0 8px 16px -4px rgba(236,122,43,.55);
  }
  .tabbar.style-elevated-center .tab-item.active span{margin-top:2px;}

  /* 12. gradient — fond en dégradé de couleur */
  .tabbar.style-gradient{background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%) !important; border-top:none;}
  .tabbar.style-gradient .tab-item{color:rgba(255,255,255,.6);}
  .tabbar.style-gradient .tab-item svg{stroke:rgba(255,255,255,.6);}
  .tabbar.style-gradient .tab-item span{color:rgba(255,255,255,.6);}
  .tabbar.style-gradient .tab-item.active{background:rgba(255,255,255,.14);}
  .tabbar.style-gradient .tab-item.active svg{stroke:var(--brass); fill:var(--brass);}
  .tabbar.style-gradient .tab-item.active span{color:#fff;}

  /* 13. rounded-top — coins arrondis uniquement en haut, façon carte qui remonte */
  .tabbar.style-rounded-top{border-radius:24px 24px 0 0; border-top:none; box-shadow:0 -10px 26px -12px rgba(15,58,99,.3) !important;}

  /* 14. border-active — cadre complet autour de l'onglet actif */
  .tabbar.style-border-active .tab-item.active{background:none; border:1.5px solid var(--brass); border-radius:12px;}

  /* 15. two-tone — fond de la barre coloré par le secteur, icônes contrastées */
  .tabbar.style-two-tone{background:var(--brass-soft) !important; border-top:2px solid var(--brass);}
  .tabbar.style-two-tone .tab-item.active{background:var(--ink);}
  .tabbar.style-two-tone .tab-item.active svg{stroke:#fff; fill:#fff;}
  .tabbar.style-two-tone .tab-item.active span{color:#fff;}

  /* ===== Bouton d'action flottant (FAB, mobile uniquement) ===== */
  .fab{display:none;}

  @media (max-width: 880px){
    .hamburger-btn{display:flex;}
    .sidebar{position:fixed; left:-250px; top:0; bottom:0; z-index:60; transition:left .22s; width:250px;}
    .sidebar.open{left:0;}
    .sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(15,58,99,.35); z-index:55;}
    .sidebar-backdrop.show{display:block;}
    .kpi-row{grid-template-columns:repeat(2,1fr);}
    .prop-hero, .booking-flow, .settings-grid{grid-template-columns:1fr;}
    .content{padding:16px 14px calc(90px + env(safe-area-inset-bottom));}
    .topbar{padding:14px 16px; justify-content:flex-start;}
    .topbar h1{font-size:17px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .topbar-meta{display:none;}

    /* Barre d'onglets bas — App Shell */
    .tabbar{
      display:flex; flex-direction:row; align-items:center; position:fixed; left:0; right:0; bottom:0; z-index:40;
      background:var(--white); backdrop-filter:blur(10px);
      border-top:1px solid var(--line);
      box-shadow:0 -6px 18px -8px rgba(15,58,99,.14);
      padding:8px 8px calc(8px + env(safe-area-inset-bottom));
      justify-content:space-around;
      flex:none;
    }

    /* FAB — reprend l'action "+" principale de l'écran actif */
    .fab{
      display:flex; align-items:center; justify-content:center;
      position:fixed; right:18px; bottom:calc(70px + env(safe-area-inset-bottom)); z-index:45;
      width:54px; height:54px; border-radius:17px;
      background:linear-gradient(150deg, var(--brass) 0%, var(--clay) 100%);
      box-shadow:0 10px 22px -6px rgba(217,95,30,.5);
      border:none; cursor:pointer;
    }
    .fab.hidden{display:none;}

    /* Modales en feuille de fond (bottom sheet) sur mobile */
    .modal-overlay{align-items:flex-end;}
    .modal{
      width:100%; max-width:100%; border-radius:22px 22px 0 0;
      max-height:88vh; overflow-y:auto;
      animation:sheetUp .22s ease-out;
    }
    @keyframes sheetUp{ from{ transform:translateY(24px); opacity:.4; } to{ transform:translateY(0); opacity:1; } }

    /* Tableaux -> cartes tactiles */
    .panel table{display:block;}
    .panel table thead{display:none;}
    .panel table tbody{display:block;}
    .panel table tr{
      display:block; background:var(--white); border:1px solid var(--paper-dim);
      border-radius:14px; padding:10px 12px; margin-bottom:9px;
    }
    .panel table td{
      display:flex; justify-content:space-between; align-items:center; gap:10px;
      padding:7px 0; border-bottom:1px solid var(--paper-dim); font-size:13px; text-align:right;
    }
    .panel table td:last-child{border-bottom:none;}
    .panel table td:first-child{font-weight:600; text-align:left; color:var(--ink);}
    .panel table td:empty{display:none;}

    /* Touch targets plus grands */
    .btn{padding:12px 18px; font-size:13.5px;}
    .btn.sm{padding:9px 14px;}
  }

/* ===== Login screen ===== */
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ink); padding:20px;}
.login-card{background:var(--white); width:100%; max-width:380px; padding:36px 32px; position:relative;}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:26px;}
.login-title{font-size:14px; color:var(--slate); margin-bottom:24px;}
.login-field{margin-bottom:16px;}
.login-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); display:block; margin-bottom:6px;}
.login-field input{width:100%; border:1px solid var(--line); padding:11px 12px; font-size:13.5px; font-family:'Inter'; border-radius:var(--radius);}
.login-field input:focus{outline:2px solid var(--teal); outline-offset:1px;}
.login-error{background:var(--clay-soft); color:var(--clay); font-size:12.5px; padding:10px 12px; margin-bottom:14px; display:none;}
.login-error.show{display:block;}
.login-foot{margin-top:18px; font-size:12px; color:var(--slate); text-align:center;}
.hidden{display:none !important;}
.loading-row{padding:30px; text-align:center; color:var(--slate); font-size:13px; position:relative; overflow:hidden;}
.loading-row::after{
  content:''; position:absolute; inset:0; margin:8px 20%;
  background:linear-gradient(90deg, transparent 0%, var(--paper-dim) 20%, var(--line) 50%, var(--paper-dim) 80%, transparent 100%);
  background-size:200% 100%; border-radius:8px; opacity:.7;
  animation:shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* ===== Pull-to-refresh (mobile) ===== */
.pull-refresh-indicator{
  display:none; align-items:center; justify-content:center;
  height:0; overflow:hidden; color:var(--brass); transition:height .15s;
}
.pull-refresh-indicator svg{width:22px; height:22px; stroke:var(--brass);}
.pull-refresh-indicator.spin svg{animation:spin .7s linear infinite;}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (max-width: 880px){
  .pull-refresh-indicator{display:flex;}
}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.type-grid-modal{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:4px;}
.type-grid-modal .field input{font-family:'JetBrains Mono';}
.field select{width:100%; border:1px solid var(--line); padding:9px 10px; font-size:13px; font-family:'Inter'; background:var(--white);}
.switch{cursor:pointer;}
.modal-overlay{position:fixed; inset:0; background:rgba(15,58,99,.55); display:flex; align-items:center; justify-content:center; z-index:90; padding:20px;}
.modal-overlay.hidden{display:none;}
.modal{background:var(--white); width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:26px 26px 22px;}
.modal h3{margin-bottom:18px;}
.toast{position:fixed; bottom:22px; right:22px; background:var(--ink); color:var(--white); padding:12px 18px; font-size:13px; z-index:60; box-shadow:0 6px 18px rgba(15,58,99,.25);}
.toast.hidden{display:none;}