/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   Rafinex360 1.78.0 — « Liquid Glass » nouvelle génération (inspiré d'iOS 27 / iPadOS 27).
   Couche purement visuelle, chargée après glass.css : aucune donnée, aucun calcul, aucune page n'est modifiée.

   Ce qui change par rapport à 1.65 (iOS 26) :
   - réglage « Verre : transparent ↔ teinté » (comme le curseur d'iOS 27) : --lg-t de 0 (le plus clair) à 1 (le plus
     lisible), réglé dans Plus › Apparence et gardé sur l'appareil ;
   - reflets de bord (lumière en haut à gauche, contre-jour en bas) sur les surfaces, sans pseudo-élément ;
   - formes concentriques : capsules pour les boutons et les choix, coins continus plus grands pour les cartes ;
   - pression « liquide » : un éclat de lumière part de l'endroit touché (js/look.js pose --px/--py) ;
   - fondu de défilement sous la barre du haut et sous la barre d'onglets ;
   - ouverture des pages, feuilles et dialogues avec un ressort plus naturel.
   Performances : le flou reste limité aux surfaces flottantes ; html.lg-lite et « réduire la transparence » coupent
   flou et éclats ; html.rx-still coupe toutes les animations.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

html{--lg-t:.5;--lg-r-xl:28px;--lg-r-lg:22px;--lg-r:16px;--lg-r-sm:12px;
  --lg-spring:cubic-bezier(.3,1.35,.5,1);--lg-ease:cubic-bezier(.25,.9,.2,1);--lg-fast:170ms;--lg-mid:300ms;
  --lg-blur:saturate(190%) blur(22px);--lg-blur-soft:saturate(170%) blur(14px)}
html.rx-nuit{--lg-rim:inset 1px 1px 0 rgba(255,255,255,.16),inset -1px -1px 0 rgba(255,255,255,.04),inset 0 0 0 .5px rgba(255,255,255,.06);
  --lg-sheen:rgba(255,255,255,.22)}
html.rx-clair{--lg-rim:inset 1px 1px 0 rgba(255,255,255,1),inset -1px -1px 0 rgba(15,23,42,.05),inset 0 0 0 .5px rgba(255,255,255,.6);
  --lg-sheen:rgba(255,255,255,.75)}

/* ───────────── 1. Verre réglable : transparent (0) ↔ teinté (1) ───────────── */
@supports (color:color-mix(in srgb,red 50%,blue)){
  html.rx-nuit{
    --lg-glass:color-mix(in srgb,#141826 calc(38% + 58% * var(--lg-t)),transparent);
    --lg-glass-strong:color-mix(in srgb,#141826 calc(62% + 36% * var(--lg-t)),transparent);
    --lg-card:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),color-mix(in srgb,#121624 calc(78% * var(--lg-t)),transparent);
    --lg-fill:color-mix(in srgb,#ffffff calc(5% + 4% * var(--lg-t)),transparent)}
  html.rx-clair{
    --lg-glass:color-mix(in srgb,#fbfcff calc(48% + 48% * var(--lg-t)),transparent);
    --lg-glass-strong:color-mix(in srgb,#fbfcff calc(70% + 28% * var(--lg-t)),transparent);
    --lg-card:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2)),color-mix(in srgb,#ffffff calc(42% + 54% * var(--lg-t)),transparent);
    --lg-fill:color-mix(in srgb,#ffffff calc(52% + 40% * var(--lg-t)),transparent)}
}

/* ───────────── 2. Surfaces : reflets de bord et coins continus ───────────── */
html .app .card,html .app .db-panel,html .app .mm-today,html .app .fab-cur,html .app .fab-sum{
  border-radius:var(--lg-r-lg);box-shadow:var(--lg-shadow),var(--lg-rim)!important}
html .app .kpi,html .app .metric,html .app .mm-k,html .app .db-kpi,html .app .pm-card{border-radius:var(--lg-r);box-shadow:var(--lg-rim)!important}
html .app .card .card{box-shadow:var(--lg-rim)!important;border-radius:var(--lg-r)}
html .app .appbar{box-shadow:inset 0 -.5px 0 var(--lg-stroke),0 8px 24px -18px rgba(0,0,0,.6)!important}
html .app .tabbar,html dialog[open],html .toast,html .web-upd{box-shadow:var(--lg-shadow-float),var(--lg-rim)!important}

/* ───────────── 3. Boutons, choix et puces en capsule ───────────── */
html .app .btn{border-radius:999px;padding-left:max(16px,1.1em);padding-right:max(16px,1.1em);box-shadow:var(--lg-rim),0 1px 2px rgba(0,0,0,.1)!important;
  transition:transform var(--lg-mid) var(--lg-spring),background var(--lg-fast),box-shadow var(--lg-fast),opacity var(--lg-fast)}
html .app .btn:active:not(:disabled){transform:scale(.95)}
html .app .btn.primary{box-shadow:inset 1px 1px 0 rgba(255,255,255,.4),inset -1px -1px 0 rgba(0,0,0,.08),0 10px 24px -10px var(--lg-accent)!important}
html .app .btn.sm{padding-left:12px;padding-right:12px}
html .app .icon-btn{border-radius:999px!important}
html .app .seg{border-radius:999px;padding:3px}
html .app .seg button{border-radius:999px;transition:background var(--lg-mid) var(--lg-ease),color var(--lg-fast),transform var(--lg-mid) var(--lg-spring)}
html .app .seg button.active,html .app .seg button[aria-selected="true"],html .app .seg button[aria-pressed="true"]{box-shadow:0 3px 10px -3px rgba(0,0,0,.3),var(--lg-rim)!important}
html .app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html .app select{border-radius:14px!important}
html .app textarea{border-radius:16px!important}

/* ───────────── 4. Pression liquide : éclat depuis le point touché (js/look.js : .lg-touch, --px, --py) ───────────── */
html .app .btn.lg-touch:not(.primary):not(.danger):not(.ghost){background:radial-gradient(140px circle at var(--px,50%) var(--py,50%),var(--lg-sheen),transparent 70%),var(--lg-fill-2)!important}
html .app .btn.primary.lg-touch{background:radial-gradient(140px circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.38),transparent 70%),var(--lg-primary)!important}
html .app .card.lg-touch{background:radial-gradient(260px circle at var(--px,50%) var(--py,50%),color-mix(in srgb,var(--lg-sheen) 45%,transparent),transparent 70%),var(--lg-card)!important}
html .app .tabbar .tab.lg-touch{background:radial-gradient(70px circle at var(--px,50%) var(--py,50%),var(--lg-sheen),transparent 75%)}

/* ───────────── 5. Barre d'onglets : capsule liquide ───────────── */
html .app .tab-ind{border-radius:999px!important;background:color-mix(in srgb,var(--lg-accent) 18%,var(--lg-fill-3))!important;
  box-shadow:var(--lg-rim),0 4px 14px -6px var(--lg-accent)!important;
  transition:transform 420ms var(--lg-spring),width 420ms var(--lg-spring),height 420ms var(--lg-spring)!important}
@media (max-width:1023px) and (orientation:portrait),(max-width:1023px) and (min-height:521px){
  html .app .tabbar{border-radius:999px!important}
  html .app .tabbar .tab,html .app .tabbar .tab[data-v="dash"]{border-radius:999px!important}
}

/* ───────────── 6. Fondu de défilement sous les barres (le contenu glisse sous le verre) ───────────── */
html .app .content{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%)}
@media (min-width:1024px),(max-height:520px) and (orientation:landscape){
  html .app .content{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px);mask-image:linear-gradient(to bottom,transparent 0,#000 18px)}
}

/* ───────────── 7. Mouvement : pages, feuilles, dialogues ───────────── */
html .app .view.active{animation:lg27View 420ms var(--lg-ease) both}
@keyframes lg27View{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
html dialog[open]{animation:lg27Dlg 460ms var(--lg-spring) both;border-radius:var(--lg-r-xl)!important}
@keyframes lg27Dlg{0%{opacity:0;transform:translateY(24px) scale(.9)}60%{opacity:1}100%{opacity:1;transform:none}}
html .app .card{transition:transform var(--lg-mid) var(--lg-spring),box-shadow var(--lg-mid) var(--lg-ease)}
html .app .card.lg-touch{transform:scale(.992)}

/* ───────────── 8. Curseur « Verre » (Plus › Apparence) ───────────── */
.lg-tint{display:flex;align-items:center;gap:12px;margin-top:6px}
.lg-tint span{font-size:12.5px;opacity:.75;white-space:nowrap}
.lg-tint input[type=range]{border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important;flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:30px;background:transparent}
.lg-tint input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--lg-fill),var(--lg-glass-solid));box-shadow:inset 0 0 0 .5px var(--lg-stroke-hi)}
.lg-tint input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:999px;
  background:var(--lg-glass-strong);box-shadow:var(--lg-rim),0 4px 12px rgba(0,0,0,.3);border:.5px solid var(--lg-stroke-hi)}
.lg-tint input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--lg-fill)}
.lg-tint input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:999px;background:var(--lg-glass-strong);border:.5px solid var(--lg-stroke-hi)}

/* ───────────── 9. Allégé, accessibilité ───────────── */
/* sans flou (Allégés, appareil modeste, navigateur sans backdrop-filter) : verre opaque, sinon le texte derrière resterait lisible à travers */
html.lg-lite.lg-lite{--lg-glass:var(--lg-glass-solid);--lg-glass-strong:var(--lg-glass-solid)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.rx-nuit,html.rx-clair{--lg-glass:var(--lg-glass-solid);--lg-glass-strong:var(--lg-glass-solid)}
}
html .toast,html .web-upd{background:color-mix(in srgb,var(--lg-glass-solid) calc(86% + 12% * var(--lg-t)),transparent)!important}
html.lg-lite .toast,html.lg-lite .web-upd{background:var(--lg-glass-solid)!important}
html.lg-lite .app .btn.lg-touch,html.lg-lite .app .card.lg-touch,html.lg-lite .app .tabbar .tab.lg-touch{background-image:none}
html.lg-lite .app .card.lg-touch{background:var(--lg-card)!important}
@media (prefers-reduced-transparency:reduce){html{--lg-t:1!important}}
html.rx-still .app .view.active,html.rx-still dialog[open]{animation:none!important}
html.rx-still .app .tab-ind,html.rx-still .app .card,html.rx-still .app .btn{transition:none!important}
html.rx-still .app .card.lg-touch{transform:none}
@media print{html .app .content{-webkit-mask-image:none;mask-image:none}}

/* ───────────── 10. Pages de connexion (auth.html) ───────────── */
.auth-lg .panel,.auth-lg .notice{border-radius:26px!important;box-shadow:0 18px 48px -16px rgba(0,0,0,.55),inset 1px 1px 0 rgba(255,255,255,.14),inset -1px -1px 0 rgba(255,255,255,.04)!important}
.auth-lg .btn{border-radius:999px!important;transition:transform 300ms cubic-bezier(.3,1.35,.5,1)}
.auth-lg .btn:active:not(:disabled){transform:scale(.96)}
.auth-lg .btn.primary{box-shadow:inset 1px 1px 0 rgba(255,255,255,.4),0 12px 28px -12px #6366f1!important}
.auth-lg input:not([type=checkbox]):not([type=radio]){border-radius:16px!important}
.auth-lg .panel{animation:lg27View 460ms cubic-bezier(.25,.9,.2,1) both}
html.rx-still .auth-lg .panel{animation:none}

/* 2.3.0 — cibles tactiles : au doigt (tablette, téléphone), chaque bouton fait au moins 40 px de haut */
@media (pointer:coarse){
  .lx-help button,.lx-app button,.adm-chip,.db-link,.link-btn,.seg button{min-height:40px}
  .lx-help button,.lx-app button,.adm-chip{padding-top:8px;padding-bottom:8px}
  .db-link,.link-btn{display:inline-flex;align-items:center}
}
/* 2.8.0 — dictée vocale */
.rx-mic{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0;padding:6px 12px;min-height:36px;border-radius:999px;border:1px solid var(--border-subtle,rgba(148,163,184,.3));background:var(--bg-elevated,rgba(255,255,255,.05));color:inherit;font:600 12.5px var(--font,system-ui);cursor:pointer}
.rx-mic.on{background:#ef4444;border-color:#ef4444;color:#fff;animation:rxMic 1.2s ease-in-out infinite}
@keyframes rxMic{50%{box-shadow:0 0 0 6px rgba(239,68,68,.25)}}
@media (prefers-reduced-motion:reduce){.rx-mic.on{animation:none}}