/* MuslimOs — LA LANGUE VISUELLE DE L'ACCUEIL OS, PROPAGÉE AUX PAGES
   ────────────────────────────────────────────────────────────────
   L'accueil (js/pages/accueil-os.js) a posé une grammaire : verre
   dépoli, dégradés blancs très faibles, lueurs colorées, grands
   arrondis. Ce fichier applique la même grammaire aux composants
   partagés de toutes les pages intérieures.

   RÈGLE DU FICHIER : on repeint les SURFACES (fonds, bordures,
   arrondis, ombres), on ne touche NI aux dispositions NI aux
   dimensions — un padding modifié ici casserait des pages testées.

   Chargé APRÈS le <style> de app.html : à spécificité égale, c'est
   donc lui qui gagne. Les styles injectés par les pages au moment où
   elles s'affichent arrivent encore après, et gardent le dernier mot.
   ──────────────────────────────────────────────────────────────── */

/* ═══ HÉROS DE PAGE : panneau de verre flottant ═══
   Avant : bandeau pleine largeur soudé au bord. Après : une carte qui
   flotte, comme les carrés de l'accueil. La marge est un AJOUT autour
   du bloc (pas une retouche de son padding interne). */
.page-hero{
  margin:14px 14px 4px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 12px 34px -18px rgba(0,0,0,.55);
}
[data-theme="day"] .page-hero{
  border-color:rgba(0,0,0,.07);
  background:linear-gradient(150deg,rgba(255,255,255,.65),rgba(255,255,255,.28));
  box-shadow:0 12px 30px -20px rgba(0,0,0,.25);
}

/* ═══ LIGNES DE LISTE ═══
   Pas de flou ici : une liste peut porter cent lignes, et cent flous
   d'arrière-plan mettent un téléphone à genoux. Teintes seulement. */
.row:hover{background:rgba(255,255,255,.035)}
[data-theme="day"] .row:hover{background:rgba(0,0,0,.03)}
.row-ico{
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.09);
}
[data-theme="day"] .row-ico{
  background:linear-gradient(150deg,rgba(0,0,0,.05),rgba(0,0,0,.015));
  border-color:rgba(0,0,0,.07);
}

/* ═══ BOUTONS : pilules, comme les gélules de l'accueil ═══ */
.btn,.back{border-radius:100px}
.btn-gold,.btn-primary{box-shadow:0 6px 22px -8px rgba(76,219,140,.5)}
.btn-gold:hover,.btn-primary:hover{box-shadow:0 9px 28px -8px rgba(76,219,140,.65)}
.btn-ghost,.btn-secondary{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.1);
}
.btn-ghost:hover,.btn-secondary:hover{background:rgba(255,255,255,.08)}
[data-theme="day"] .btn-ghost,[data-theme="day"] .btn-secondary{
  background:rgba(0,0,0,.035);border-color:rgba(0,0,0,.1);
}
[data-theme="day"] .btn-ghost:hover,[data-theme="day"] .btn-secondary:hover{background:rgba(0,0,0,.06)}

/* ═══ CHAMPS DE SAISIE : le verre de la recherche de l'accueil ═══
   Le contour de focus vient du style d'origine (.input:focus, plus
   spécifique) : il continue de gagner, exprès. */
.input{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.09);
  border-radius:13px;
}
[data-theme="day"] .input{
  background:rgba(0,0,0,.03);
  border-color:rgba(0,0,0,.1);
}

/* ═══ FENÊTRES MODALES ═══ */
.modal{
  border-radius:22px;
  border-color:rgba(255,255,255,.1);
  background:rgba(13,15,26,.9);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
}
[data-theme="day"] .modal{
  border-color:rgba(0,0,0,.08);
  background:rgba(245,245,240,.92);
}

/* ═══ PETITES SURFACES ═══ */
.stat{background:rgba(255,255,255,.028)}
[data-theme="day"] .stat{background:rgba(0,0,0,.025)}
.toast{
  border-radius:100px;
  background:rgba(11,13,24,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}