/* ══════════════════════════════════════════════════════════════
   CliOS — Système "Liquid Glass" (style iOS 26)
   Panneaux translucides, flous profonds, reflets fins.
   Mobile-first : cibles tactiles ≥ 44px, marges généreuses.
   ══════════════════════════════════════════════════════════════ */

html, body { background: #050506; }

/* Halo de couleur flouté derrière l'interface — donne de la matière au verre */
.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.bg-orbs span {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.35;
}
.bg-orbs .orb-1 { width: 26rem; height: 26rem; top: -8rem; left: -6rem; background: #2563eb; }
.bg-orbs .orb-2 { width: 24rem; height: 24rem; top: 22%; right: -8rem; background: #7c3aed; }
.bg-orbs .orb-3 { width: 22rem; height: 22rem; bottom: -9rem; left: 18%; background: #db2777; }

/* Contenu au-dessus du halo */
.glass-content { position: relative; z-index: 1; }

/* Panneau de verre standard (cartes) */
.glass {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035));
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
    border-radius: 1.75rem;
}

/* Verre plus discret pour des éléments imbriqués (tuiles internes) */
.glass-well {
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.25rem;
}

/* Barre de navigation (header sticky + tab bar flottante) */
.glass-nav {
    background: rgba(10,10,15,0.55);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.10);
}

/* Bouton / pastille de verre (contrôles façon Control Center) */
.glass-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.glass-btn:active { background: rgba(255,255,255,0.18); transform: scale(0.96); }

/* Wireframe — pour toute donnée sans API/capteur réel derrière.
   Volontairement terne et hachuré : ne doit jamais être confondu avec une carte live. */
.skeleton {
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 10px, rgba(255,255,255,0.05) 10px 20px);
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 1.75rem;
    color: rgba(255,255,255,0.4);
}
.skeleton-tag {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.5);
}

/* Cibles tactiles confortables (Apple HIG : 44px mini) */
.tap-target { min-height: 44px; min-width: 44px; }

/* Zone de sécurité iOS (encoche / barre de gestes) */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-top { padding-top: env(safe-area-inset-top, 0); }