/* Interface patrimoine — mobile-first, pensée pour l'iPhone puis élargie au Mac.
   Police système : rendu natif sur iOS et macOS. Thème clair/sombre automatique. */

:root {
    --fond:        #f5f5f7;
    --surface:     #ffffff;
    --surface-2:   #fafafa;
    --bordure:     #e3e3e8;
    --texte:       #1a1a1f;
    --texte-doux:  #6e6e78;
    --accent:      #2f6df6;
    --hausse:      #12a150;
    --baisse:      #e5484d;
    --ombre:       0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
    --rayon:       18px;
}

/* Thème sombre. Deux blocs identiques à garder synchronisés :
   - le premier suit le réglage du système (sauf si « clair » a été choisi) ;
   - le second s'applique quand « sombre » a été choisi explicitement. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fond:       #0c0c0f;
        --surface:    #16161b;
        --surface-2:  #1d1d23;
        --bordure:    #2a2a33;
        --texte:      #f2f2f5;
        --texte-doux: #9a9aa6;
        --accent:     #5b8dff;
        --hausse:     #30d158;
        --baisse:     #ff5f5f;
        --ombre:      0 1px 3px rgba(0,0,0,.4);
    }
}

:root[data-theme="dark"] {
    --fond:       #0c0c0f;
    --surface:    #16161b;
    --surface-2:  #1d1d23;
    --bordure:    #2a2a33;
    --texte:      #f2f2f5;
    --texte-doux: #9a9aa6;
    --accent:     #5b8dff;
    --hausse:     #30d158;
    --baisse:     #ff5f5f;
    --ombre:      0 1px 3px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                 system-ui, sans-serif;
    background: var(--fond);
    color: var(--texte);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.45;
    /* Respecte l'encoche et la barre d'accueil de l'iPhone */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             calc(76px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
}

.page { max-width: 780px; margin: 0 auto; padding: 20px 16px 8px; }

/* ---------------------------------------------------------------- En-tête -- */
.entete { display: flex; align-items: baseline; justify-content: space-between;
          margin-bottom: 18px; }
.entete h1 { font-size: 20px; font-weight: 650; margin: 0; letter-spacing: -.02em; }
.entete a { color: var(--texte-doux); text-decoration: none; font-size: 14px; }
.actions-entete { display: flex; align-items: center; gap: 8px; }
#bascule-theme { width: 34px; height: 34px; font-size: 15px; }

/* Bouton portant une icône SVG (œil du masque) */
.svg-bouton { display: inline-grid; place-items: center; padding: 0; }
.svg-bouton svg, #bascule-masque {
    stroke: currentColor; fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
#bascule-masque { width: 34px; height: 34px; }

/* --------------------------------------------------- Masque des montants -- */
/* Les sommes deviennent illisibles, les pourcentages de performance restent
   visibles : on peut consulter ses rendements sans exposer son patrimoine.
   Technique : texte transparent + ombre floue, la mise en page ne bouge pas. */
/* Le montant réel devient transparent (la mise en page ne bouge donc pas) et
   des points le recouvrent. Contrairement à un flou, cela ne laisse deviner
   ni les chiffres ni la longueur du nombre. */
:root[data-masque] .montant {
    color: transparent !important;
    position: relative;
    user-select: none;
}
:root[data-masque] .montant::after {
    content: "••••••";
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    color: var(--texte);
    text-align: inherit;          /* suit l'alignement du bloc parent */
    letter-spacing: .06em;
    overflow: hidden;
}
/* Les points reprennent la couleur du contexte (gain vert, perte rouge) */
:root[data-masque] .montant.hausse::after,
:root[data-masque] .delta.hausse .montant::after { color: var(--hausse); }
:root[data-masque] .montant.baisse::after,
:root[data-masque] .delta.baisse .montant::after { color: var(--baisse); }

/* Les petits montants secondaires (quantité × cours) prennent moins de points */
:root[data-masque] .ligne .nom .montant::after { content: "••••"; }

/* ------------------------------------------------------------------ Carte -- */
.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 20px;
    margin-bottom: 14px;
}
.carte h2 {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--texte-doux);
    margin: 0 0 14px;
}

/* -------------------------------------------------------------- Patrimoine -- */
.total {
    font-size: clamp(34px, 11vw, 46px);
    font-weight: 700; letter-spacing: -.03em;
    line-height: 1.05; margin: 2px 0 6px;
    font-variant-numeric: tabular-nums;
}
.total-libelle { font-size: 13px; color: var(--texte-doux); }

.delta { display: inline-flex; align-items: center; gap: 6px;
         font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hausse { color: var(--hausse); }
.baisse { color: var(--baisse); }

/* ------------------------------------------------------------------ Grille -- */
.grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
          margin-top: 18px; }
.mini { background: var(--surface-2); border-radius: 13px; padding: 13px 14px; }
.mini .k { font-size: 11px; color: var(--texte-doux); text-transform: uppercase;
           letter-spacing: .05em; }
.mini .v { font-size: 18px; font-weight: 650; margin-top: 3px;
           font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ Courbe -- */
.courbe { width: 100%; height: auto; display: block; overflow: visible; }
.courbe-pied { display: flex; justify-content: space-between;
               font-size: 12px; color: var(--texte-doux); margin-top: 8px; }

/* --------------------------------------------------------------- Positions -- */
.ligne {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 0; border-bottom: 1px solid var(--bordure);
}
.ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.ligne:first-child { padding-top: 0; }

.pastille {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700; letter-spacing: -.02em;
    background: var(--surface-2); color: var(--texte-doux);
}
.pastille.etf    { background: rgba(47,109,246,.13); color: #2f6df6; }
.pastille.action { background: rgba(175,82,222,.14); color: #af52de; }
.pastille.crypto { background: rgba(255,149,0,.15);  color: #ff9500; }
.pastille.cash   { background: rgba(18,161,80,.13);  color: #12a150; }

/* Logo réel — déclaré APRÈS les couleurs par type pour les neutraliser.
   Tuile blanche dans les deux thèmes : les logos transparents (Bitcoin) comme
   opaques (favicons JPEG) ressortent alors de la même façon. */
.pastille.avec-logo { background: #fff; padding: 5px; overflow: hidden; }
.pastille.avec-logo img { width: 100%; height: 100%; object-fit: contain;
                          display: block; }

.ligne .nom { flex: 1; min-width: 0; }
.ligne .nom b { display: block; font-weight: 600; font-size: 15px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne .nom span { font-size: 12.5px; color: var(--texte-doux);
                   display: block; white-space: nowrap;
                   overflow: hidden; text-overflow: ellipsis; }
.ligne .chiffres { text-align: right; flex-shrink: 0;
                   font-variant-numeric: tabular-nums; }
.ligne .chiffres b { display: block; font-weight: 600; font-size: 15px; }
.ligne .chiffres span { font-size: 12.5px; font-weight: 600; }

/* ----------------------------------------------------------- Répartition -- */
.barre { display: flex; height: 10px; border-radius: 99px; overflow: hidden;
         gap: 2px; margin-bottom: 13px; }
.barre i { display: block; }
.legende { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px;
           color: var(--texte-doux); text-transform: capitalize; }
.legende i { width: 9px; height: 9px; border-radius: 3px; display: inline-block;
             margin-right: 5px; vertical-align: baseline; }

/* Couleurs pleines (les pastilles, elles, sont volontairement translucides) */
.teinte-etf    { background: #2f6df6; }
.teinte-action { background: #af52de; }
.teinte-crypto { background: #ff9500; }
.teinte-cash   { background: #12a150; }

/* -------------------------------------------------- Sélecteur de période -- */
.periodes { display: flex; gap: 6px; margin: -4px 0 15px; }
.periodes a {
    flex: 1; text-align: center; text-decoration: none;
    font-size: 12.5px; font-weight: 600; padding: 7px 4px;
    border-radius: 9px; color: var(--texte-doux); background: var(--surface-2);
}
.periodes a.on { background: var(--accent); color: #fff; }

/* ---------------------------------------------------------------- Alertes -- */
.alerte { border-radius: 13px; padding: 13px 15px; font-size: 14px;
          margin-bottom: 14px; border: 1px solid; }
.alerte.rouge { background: rgba(229,72,77,.09); border-color: rgba(229,72,77,.3); }
.alerte.info  { background: var(--surface-2); border-color: var(--bordure);
                color: var(--texte-doux); }
.alerte b { display: block; margin-bottom: 3px; }

/* ------------------------------------------------------------- Navigation -- */
.onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; justify-content: space-around;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--bordure);
    padding: 9px 4px calc(9px + env(safe-area-inset-bottom));
}
.onglets a { flex: 1; text-align: center; text-decoration: none;
             color: var(--texte-doux); font-size: 10.5px; font-weight: 550;
             letter-spacing: .01em; }
.onglets a.on { color: var(--accent); }
.onglets .ic {
    display: block; width: 23px; height: 23px; margin: 0 auto 3px;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
}
.onglets a.on .ic { stroke-width: 2.2; }

/* ------------------------------------------------------------------ Login -- */
.login { min-height: 78vh; display: grid; place-items: center; }
.login .carte { width: 100%; max-width: 340px; text-align: center; }
.login h1 { font-size: 22px; margin: 0 0 6px; }
.login p { color: var(--texte-doux); font-size: 14px; margin: 0 0 20px; }
input[type=password], input[type=text], input[type=number], input[type=date],
select {
    width: 100%; padding: 13px 15px; font-size: 17px; /* 17px : évite le zoom iOS */
    border: 1px solid var(--bordure); border-radius: 13px;
    background: var(--surface-2); color: var(--texte);
    font-family: inherit; -webkit-appearance: none;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button {
    width: 100%; margin-top: 11px; padding: 14px; font-size: 16px;
    font-weight: 620; border: 0; border-radius: 13px;
    background: var(--accent); color: #fff; font-family: inherit;
    cursor: pointer; -webkit-appearance: none;
}
button:active { opacity: .82; }
.erreur { color: var(--baisse); font-size: 14px; margin-top: 11px; }
.login a { color: var(--accent); text-decoration: none; font-size: 14px;
           font-weight: 550; }
.login .carte { text-align: left; }
.login h1, .login p { text-align: center; }

.vide { text-align: center; color: var(--texte-doux); padding: 34px 16px;
        font-size: 14.5px; }

/* ------------------------------------------------------------ Formulaire -- */
.champ { margin-bottom: 13px; }
.champ label { display: block; font-size: 12.5px; font-weight: 600;
               color: var(--texte-doux); margin-bottom: 6px; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aide { font-size: 13px; color: var(--texte-doux); margin: 4px 0 14px;
        line-height: 1.4; }

/* Bascule Achat / Vente */
.bascule { display: flex; background: var(--surface-2); border-radius: 13px;
           padding: 3px; border: 1px solid var(--bordure); }
.bascule input { position: absolute; opacity: 0; pointer-events: none; }
.bascule label { flex: 1; text-align: center; margin: 0; padding: 10px 4px;
                 font-size: 14px; font-weight: 600; border-radius: 10px;
                 cursor: pointer; color: var(--texte-doux); }
.bascule input:checked + label { background: var(--accent); color: #fff; }

.apercu { margin: 4px 0 14px; }
.apercu .v { font-size: 16px; }
.calcule { background: rgba(47,109,246,.11); border: 1px solid rgba(47,109,246,.3);
           color: var(--accent); border-radius: 11px; padding: 10px 13px;
           font-size: 14px; font-weight: 600; margin-bottom: 10px; }

.alerte.ok { background: rgba(18,161,80,.10); border-color: rgba(18,161,80,.32);
             color: var(--hausse); }

details.carte summary { cursor: pointer; font-size: 14px; font-weight: 600;
                        color: var(--accent); list-style: none; }
details.carte summary::-webkit-details-marker { display: none; }
details.carte summary::before { content: "＋ "; }
details[open].carte summary::before { content: "− "; }

.maj { display: flex; align-items: center; justify-content: space-between;
       gap: 10px; margin: -4px 0 12px; font-size: 12.5px;
       color: var(--texte-doux); }

.mini-bouton {
    width: 34px; height: 34px; margin: 0; padding: 0; flex-shrink: 0;
    background: var(--surface-2); color: var(--texte-doux);
    border: 1px solid var(--bordure); border-radius: 10px;
    font-size: 14px; line-height: 1;
}

/* ------------------------------------------------- Parcours d'accueil ----- */
.accueil { padding: 8px 0 40px; animation: apparition .45s ease both; }

@keyframes apparition {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.accueil-progres { display: flex; gap: 7px; justify-content: center;
                   margin: 4px 0 34px; }
.accueil-progres i { width: 30px; height: 4px; border-radius: 99px;
                     background: var(--bordure); transition: background .3s; }
.accueil-progres i.fait  { background: var(--accent); opacity: .45; }
.accueil-progres i.actif { background: var(--accent); }

.accueil-marque {
    width: 66px; height: 66px; margin: 0 auto 22px;
    display: grid; place-items: center;
    font-size: 30px; border-radius: 21px;
    background: linear-gradient(145deg, var(--accent), #7aa5ff);
    color: #fff; box-shadow: 0 10px 28px rgba(47,109,246,.32);
}
.accueil-marque.reussite {
    background: linear-gradient(145deg, var(--hausse), #5fe08a);
    box-shadow: 0 10px 28px rgba(18,161,80,.32);
}

.accueil-titre {
    font-size: clamp(26px, 7.5vw, 33px); font-weight: 700;
    letter-spacing: -.025em; line-height: 1.15;
    margin: 0 0 12px; text-align: center;
}
.accueil-intro {
    font-size: 15.5px; line-height: 1.5; color: var(--texte-doux);
    text-align: center; margin: 0 auto 26px; max-width: 30em;
}

.accueil-points { display: flex; flex-direction: column; gap: 13px;
                  margin: 0 0 26px; }
.accueil-point {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: 15px; padding: 15px 16px;
}
.accueil-point .puce {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
    background: var(--surface-2); color: var(--accent);
}
/* `> div > b` : seul le titre passe en bloc. Un gras à l'intérieur du texte
   descriptif doit rester dans le flux, sans casser la ligne. */
.accueil-point > div > b { display: block; font-size: 15px; margin-bottom: 2px; }
.accueil-point span { font-size: 13.5px; color: var(--texte-doux);
                      line-height: 1.45; }
.accueil-point span b { font-weight: 650; color: var(--texte); }

.accueil-bouton {
    display: block; width: 100%; margin-top: 8px; padding: 15px;
    font-size: 16.5px; font-weight: 650; text-align: center;
    text-decoration: none; border: 0; border-radius: 14px;
    background: var(--accent); color: #fff; cursor: pointer;
    font-family: inherit;
}
.accueil-bouton:active { opacity: .85; }

.accueil-note { font-size: 13px; color: var(--texte-doux);
                text-align: center; margin: 18px 0 0; line-height: 1.45; }

.accueil-passer {
    display: block; text-align: center; margin-top: 26px;
    font-size: 13.5px; color: var(--texte-doux); text-decoration: none;
}

.suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.suggestion {
    width: auto; margin: 0; padding: 7px 11px; font-size: 12.5px;
    font-weight: 550; border-radius: 99px;
    background: var(--surface-2); color: var(--texte-doux);
    border: 1px solid var(--bordure);
}
.facultatif { font-weight: 400; color: var(--texte-doux); }

@media (min-width: 700px) {
    .grille { grid-template-columns: repeat(4, 1fr); }
    .page { padding-top: 30px; }
}