/* style.css — feuille de style de l'app.
   Extraite de l'ancien <style> de index.html le 20/09/2026.
   Alignée sur la charte UX/UI (UX_UI_CHARTER.md, sections 1 à 7) le 24/09/2026. */
  /* ==========================================================================
     JETONS DE DESIGN — repris tels quels de Muscu (thème "Ardoise & Craie")
     pour une cohérence visuelle entre le Portail et les 3 apps.
     ========================================================================== */
  :root{
    --bg:#0d1014;
    --card:#161b22;
    --card-2:#1e2530;
    --border:rgba(255,255,255,0.09);
    --border-strong:rgba(255,255,255,0.17);

    --text:#e9eff6;
    --text-dim:#8a97a8;

    /* Identité couple + accent dynamique (charte §1). Le Portail n'a pas de sélecteur :
       il suit le profil choisi dans Muscu (localStorage duo_profile, même origine),
       posé sur <html data-profil> par app.js. */
    --corentin:#1f8fff; --corentin-rgb:31,143,255; --corentin-dark:#1a5fc4;
    --lisa:#ff3d7e; --lisa-rgb:255,61,126; --lisa-dark:#c4225f;
    --accent:var(--corentin); --accent-rgb:var(--corentin-rgb); --accent-dark:var(--corentin-dark);
    --accent-soft:rgba(var(--accent-rgb),0.14);
    --glass-modal:rgba(22,27,34,0.95);

    /* Couleurs d'IDENTITÉ DES APPS (icônes et pastilles des cartes) : écart assumé à la
       charte §9, comme les couleurs de catégories de Budget — elles désignent une app,
       jamais utilisées en décoration. */
    --blue:#1f8fff;      /* Musculation */
    --blue-dark:#1a5fc4;
    --gold:#ffb800;      /* Budget */
    --gold-dark:#c48e00;
    --green:#12b981;     /* Courses */
    --green-dark:#0d8f64;
    --violet:#a855f7;    /* Todo (11/10/2026) */
    --violet-dark:#7e3bc4;
    --danger:#ef4444;    /* reste à vivre négatif */

    --r-xs:4px;
    --r-sm:10px;
    --r-md:14px;
    --r-lg:18px;
    --r-xl:22px;
    --r-pill:999px;

    --shadow-sm: 0 6px 16px rgba(0,0,0,0.30);
    --shadow: 0 14px 32px rgba(0,0,0,0.44), 0 2px 8px rgba(0,0,0,0.28);
    --shadow-lg: 0 -8px 40px rgba(0,0,0,0.5);

    --t-fast:.15s;
    --t-mid:.22s;

    --f-display: 'Bebas Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  html[data-profil="lisa"]{ --accent:var(--lisa); --accent-rgb:var(--lisa-rgb); --accent-dark:var(--lisa-dark); }
  /* Mode clair retiré le 28/09/2026 : sombre uniquement (4 apps). */

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{ margin:0; min-height:100%; overscroll-behavior:none; }
  body{
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
    -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start;
    /* viewport-fit=cover : le contenu du haut doit démarrer sous la barre d'état (cf. PROBLEMES_RESOLUS, 20/09/2026) */
    padding:calc(env(safe-area-inset-top, 0px) + 16px) 18px calc(22px + env(safe-area-inset-bottom));
    position:relative;
    overflow-x:hidden;
  }

  /* Poussière de craie, discrète, façon tableau noir essuyé — reprise de Muscu */
  body::before{
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:.5;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 18%, rgba(238,240,238,.5), transparent),
      radial-gradient(1px 1px at 78% 9%, rgba(238,240,238,.4), transparent),
      radial-gradient(1.5px 1.5px at 32% 64%, rgba(238,240,238,.35), transparent),
      radial-gradient(1px 1px at 91% 47%, rgba(238,240,238,.4), transparent),
      radial-gradient(1.5px 1.5px at 58% 82%, rgba(238,240,238,.3), transparent),
      radial-gradient(1px 1px at 6% 88%, rgba(238,240,238,.35), transparent);
    background-repeat:no-repeat;
  }

  main{ position:relative; z-index:1; display:flex; flex-direction:column; max-width:460px; width:100%; margin:0 auto; }

  .reload-row{ display:flex; justify-content:center; margin-top:18px; }
  .reload-btn{
    width:44px; height:44px; padding:0; border-radius:50%;
    background:var(--card); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-dim);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease-out), color .15s ease, background .15s ease;   /* 0,5 → 0,3 s (12/10/2026) */
  }
  .reload-btn svg{ width:16px; height:16px; }
  .reload-btn:active{ background:var(--card-2); color:var(--text); transform:scale(0.97); }
  .reload-btn.spin svg{ transform: rotate(360deg); transition: transform .3s var(--ease-out); }

  .app-title{
    font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--text-dim); margin:0 0 4px 2px; font-weight:700;
  }
  .app-title-brand{ color:var(--accent); }

  .big-question{
    font-family:var(--f-display); text-transform:uppercase;
    font-size:34px; font-weight:400; letter-spacing:.01em;
    margin:4px 2px 22px 2px; line-height:1.05;
  }

  /* ==========================================================================
     TABLEAU DE BORD (22/09/2026, hiérarchie revue après essai sur iPhone)
     Lecture d'une carte : 1) nom de l'app + « mis à jour il y a… », 2) l'information clé
     en GROS, 3) une phrase d'explication en gris. Les libellés sont en phrase normale :
     les petites majuscules espacées de la 1re version rendaient tout au même niveau.
     ========================================================================== */
  .topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-bottom:6px; }
  .topbar .app-title{ margin:0; }
  .dash-titre{ margin:2px 2px 16px; }
  .dash-titre .big-question{ margin:0; }
  .dash-date{ margin:4px 0 0; font-size:14px; font-weight:500; color:var(--text-dim); }

  .dash{ display:flex; flex-direction:column; gap:14px; }
  .dash-card{
    display:block; color:var(--text); text-decoration:none;
    background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm); overflow:hidden;
    transition: transform var(--t-fast) var(--ease-out);
  }
  .dash-card:active{ transform:scale(0.98); }
  .dash-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* 1) En-tête : nom de l'app + fraîcheur des chiffres (à la place de l'ancienne description de l'app) */
  .dash-top{ display:flex; align-items:center; gap:14px; padding:16px 16px 0; min-height:62px; }
  .dash-card .choice-label{ font-size:22px; }
  .dash-maj{ font-size:12.5px; color:var(--text-dim); margin-top:1px; }
  .dash-maj.vieux{ color:var(--gold); }                          /* plus de 24 h : chiffres à prendre avec prudence */

  .dash-body{ display:flex; flex-direction:column; padding:16px 16px 18px; }
  .dash-label{ display:block; font-size:13px; font-weight:600; color:var(--text-dim); }
  .dash-label-2{ margin-top:16px; }
  .dash-label[hidden]{ display:none; }                            /* display:block ci-dessus écrase sinon l'attribut hidden */
  /* 2) L'information clé */
  .dash-value{ display:block; font-size:19px; font-weight:800; line-height:1.25; margin-top:4px; }
  .dash-big{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
  .dash-int{ font-family:var(--f-display); font-size:52px; line-height:1; letter-spacing:.01em; }
  .dash-unit{ font-size:22px; font-weight:700; color:var(--text-dim); }
  .dash-unit-txt{ font-size:17px; font-weight:600; }
  .dash-big.neg .dash-int, .dash-big.neg .dash-unit{ color:var(--danger); }
  /* 3) L'explication */
  .dash-sub{ display:block; font-size:13.5px; color:var(--text-dim); margin-top:4px; }
  .dash-sep{ display:block; height:1px; background:var(--border); margin:16px 0 14px; }

  /* Muscu : phrase motivante du duo (22/09/26), à la place du compte hebdomadaire */
  .dash-phrase{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; padding:12px 14px; border-radius:var(--r-md); background:var(--card-2); }
  .dash-phrase svg{ flex:none; width:18px; height:18px; margin-top:1px; }
  .dash-phrase span{ font-size:14.5px; font-weight:700; line-height:1.35; }

  /* Budget : jauge = part du budget déjà dépensée */
  .gauge{ display:block; height:10px; border-radius:var(--r-pill); background:var(--card-2); overflow:hidden; margin-top:16px; }
  .gauge-fill{ display:block; height:100%; width:100%; border-radius:var(--r-pill); background:linear-gradient(90deg, var(--gold), var(--gold-dark)); transform:translateX(-100%); transition:transform .3s var(--ease-out); }
  /* Remplissage piloté en translateX (charte §11.3 : transform/opacity seulement)
     depuis app.js, au lieu de width : la barre garde sa forme (bout arrondi),
     elle glisse simplement depuis la gauche. -100% = vide, 0 = pleine. */
  .gauge-fill.over{ background:var(--danger); }
  .dash-meta{ display:block; margin-top:8px; font-size:13px; color:var(--text-dim); }

  /* Courses : rayons concernés, avec le nombre de produits dans une pastille */
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .chips:empty{ display:none; }
  .chip{ display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 6px 0 12px; border-radius:var(--r-pill); background:var(--card-2); font-size:13.5px; font-weight:600; }
  .chip-n{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--r-pill); background:var(--green); color:#04150f; font-size:12px; font-weight:800; }

  .dash-card.blue .choice-icon{ background:linear-gradient(150deg, var(--blue), var(--blue-dark)); }
  .dash-card.gold .choice-icon{ background:linear-gradient(150deg, var(--gold), var(--gold-dark)); }
  .dash-card.green .choice-icon{ background:linear-gradient(150deg, var(--green), var(--green-dark)); }
  .dash-card.violet .choice-icon{ background:linear-gradient(150deg, var(--violet), var(--violet-dark)); }
  #to-chips .chip-n{ background:var(--c-liste, var(--violet)); color:#fff; }

  .choice-icon{
    width:46px; height:46px; flex:0 0 auto; border-radius:var(--r-md);
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .choice-icon svg{ width:20px; height:20px; }

  .choice-text{ flex:1; min-width:0; }
  .choice-label{
    font-family:var(--f-display); text-transform:uppercase; letter-spacing:.02em;
    font-size:19px; font-weight:400; display:block;
  }
  .choice-desc{
    display:block; font-size:12.5px; color:var(--text-dim); margin-top:2px; font-weight:500;
  }
  .choice-chev{ color:var(--text-dim); font-size:18px; flex:0 0 auto; transition: transform var(--t-fast) var(--ease-out); }
  .dash-card:active .choice-chev{ transform: translateX(2px); }

  .derniere-maj{ text-align:center; font-size:12px; color:var(--text-dim); margin-top:10px; }

  /* Boîte de dialogue en bottom-sheet (charte §5.9) — remplace window.confirm() */
  .modal-overlay{
    position:fixed; inset:0; z-index:50; background:rgba(0,0,0,0.6);
    display:none; align-items:flex-end; justify-content:center;
  }
  .modal-overlay.open{ display:flex; animation:fondIn .22s var(--ease-out); }
  .modal-sheet{
    width:100%; max-width:520px; text-align:center;
    background:var(--glass-modal);
    -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--border); border-bottom:none; border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:var(--shadow-lg);
    padding:22px 20px calc(20px + env(safe-area-inset-bottom));
    animation:feuilleIn .28s var(--ease-drawer);
  }
  .modal-sheet h2{ margin:0 0 8px; font-size:19px; font-weight:700; }
  .modal-sheet p{ margin:0 0 20px; font-size:14px; line-height:1.45; color:var(--text-dim); }
  .modal-actions{ display:flex; gap:10px; }
  .modal-actions button{
    flex:1; min-height:48px; padding:14px; border-radius:var(--r-md); font-family:inherit;
    font-size:15px; font-weight:700; transition:transform var(--t-fast) var(--ease-out);
  }
  .modal-actions button:active{ transform:scale(0.97); }
  .btn-neutre{ background:var(--card-2); color:var(--text); border:1px solid var(--border); }
  .btn-accent{ background:var(--accent); color:#fff; border:1px solid transparent; }
  @keyframes fondIn{ from{opacity:0;} to{opacity:1;} }
  @keyframes feuilleIn{ from{transform:translateY(24px); opacity:0;} to{transform:translateY(0); opacity:1;} }

  @media (prefers-reduced-motion: reduce){
    .dash-card, .gauge-fill, .choice-chev, .reload-btn, .modal-actions button{ transition:none; }
    /* « Réduit ≠ zéro » (12/10/2026) : la feuille apparaît en fondu, sans glisser. */
    .modal-sheet{ animation-name:fondIn; }
  }



/* ---------- Notifications du duo (30/09/2026) : sélecteur sous « Style des apps » ----------
   Même habillage que .style-choix (verre.css, y compris Relief et Argile) ; ici seulement
   l'état indisponible et la ligne d'explication. */
#notif-choix button:disabled{ opacity:.45; cursor:default; }
#notif-choix button:disabled:active{ transform:none; }
.notif-aide{
  max-width:300px; margin:8px auto 0; text-align:center;
  font-size:12px; line-height:1.45; color:var(--v-dim, #8a97a8);
}
.notif-aide:empty{ display:none; }