/* ══════════════════════════════════════════════════════════════
   CliOS — Système "Elegant Minimal"
   Surfaces sobres, accent unique corail/ambre, animations discrètes.
   Mobile-first : cibles tactiles ≥ 44px, marges généreuses.
   ══════════════════════════════════════════════════════════════ */

/* Inter en variable font auto-hébergée (évite le fallback système et le FOUT d'un CDN) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/vendor/inter/Inter-Variable.woff2') format('woff2');
}

:root {
    --accent: #ffb84d;
    --accent-2: #ff8a5c;
    --accent-rgb: 255,184,77;
    --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));
}

html, body { background: #0b0c10; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    letter-spacing: -0.012em;
}

/* Halo unique, discret, en haut de l'écran — donne juste un peu de profondeur */
.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 40% at 50% -10%, rgba(255,184,77,0.08), transparent 60%);
}
.bg-orbs span { display: none; }

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

/* ── Animations d'entrée ─────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
header { animation: fadeDown .45s cubic-bezier(.2,.8,.2,1) both; }

/* Panneau standard (cartes) */
.glass {
    position: relative;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px -28px rgba(0,0,0,0.6);
    animation: fadeUp .45s cubic-bezier(.2,.8,.2,1) both;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.glass:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -24px rgba(0,0,0,0.65);
}

/* Surface imbriquée, plus discrète (tuiles internes) */
.glass-well {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: 1rem;
    transition: background-color .2s ease, border-color .2s ease;
}
a.glass-well:hover, button.glass-well:hover { background: rgba(255,255,255,0.055); }

/* Barre de navigation (header sticky + tab bar flottante) */
.glass-nav {
    background: rgba(13,14,17,0.78);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 32px -16px rgba(0,0,0,0.55);
}

/* Bouton neutre (contrôles) */
.glass-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.glass-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.14); }
.glass-btn:active { background: rgba(255,255,255,0.12); 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.02) 0 10px, rgba(255,255,255,0.04) 10px 20px);
    border: 1px dashed rgba(255,255,255,0.16);
    border-radius: 1.25rem;
    color: rgba(255,255,255,0.4);
}
.skeleton-tag {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.5);
}

/* Badge/chip d'icône de section — signature visuelle unifiée */
.icon-chip {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.06));
    color: var(--accent);
}

/* Bouton d'action principal (accent) */
.btn-accent {
    background: var(--accent-grad);
    color: #1a1200;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -8px rgba(var(--accent-rgb),0.45); }
.btn-accent:active { transform: scale(0.97); }

/* 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 ne sert qu'à la tab bar flottante : elle décale la pastille elle-même
   au-dessus du home indicator (position), plutôt que d'ajouter du padding À L'INTÉRIEUR
   (qui gonflait la barre avec un grand vide sous les icônes). Chargé après tailwind.css,
   cette règle remplace la valeur de bottom-3 pour les éléments qui portent les deux classes. */
.safe-bottom { bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
.safe-top { padding-top: env(safe-area-inset-top, 0); }

/* ── Écran de chargement ──────────────────────────────────────────
   Losange du logo, centré, qui pulse doucement — affiché dès le <head>
   (avant même le reste de la page) et pendant la navigation vers une
   autre page, pour ne jamais laisser d'écran vide/figé sans retour visuel. */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0c10;
    opacity: 1;
    transition: opacity .3s ease;
}
#page-loader.done { opacity: 0; pointer-events: none; }
#page-loader svg {
    width: 3rem;
    height: 3rem;
    animation: page-loader-pulse 1.1s ease-in-out infinite;
}
@keyframes page-loader-pulse {
    0%, 100% { transform: scale(0.85); opacity: .55; }
    50%      { transform: scale(1);    opacity: 1;   }
}