/* ============================================================
   demo-profil.css — Onglet « Profil » (4e onglet de la tab bar).
   [REFONTE-ENTREE]

   Réunit « Mon compte » et « Paramètres » en une surface. Le corps
   de la modale Réglages y est DÉPLACÉ par demo-profil.js : il n'a
   aucun style propre (.settings-modal-body est un div nu), donc il
   adopte simplement la carte qui l'accueille ici — les sections
   (.settings-section-title, grilles langue/unités, toggles) gardent
   leurs sélecteurs autonomes et leur rendu à l'identique.

   Système : palette Lagune (DESIGN.md), aucun fallback var()
   (Règle du Fallback Interdit), cibles tactiles 44px, corail
   réservé aux chemins vers l'IA (donc ABSENT de cet écran).
   ============================================================ */

/* ---------- Vue plein écran (pattern .view-explore) ---------- */
.view-profil {
    flex: 1;
    flex-direction: column;
    min-height: 0;
    background: var(--c-bg);
}
.view-profil-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px calc(40px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
/* Anti-écrasement flex-column : un enfant en overflow:hidden voit son min-height auto
   tomber à 0 et devient compressible dès que le contenu dépasse le viewport (bug vécu
   sur le feed Explorer). flex-shrink:0 fige chaque bloc à sa hauteur réelle. */
.view-profil-scroll > * {
    flex-shrink: 0;
}

/* ---------- Carte d'identité (connecté) ---------- */
.profil-id {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 15px 14px;
    background: var(--c-bg-card);
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--v2-shadow-card);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast) var(--ease-out);
}
.profil-id:active { transform: scale(0.99); }
.profil-id-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--r-full);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow caché : la photo de profil, quand il y en a une, doit épouser le cercle. */
    overflow: hidden;
    background: linear-gradient(150deg, var(--c-primary-soft), var(--c-primary));
    color: var(--c-text-inverse);
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.3rem;
    font-weight: 500;
}
.profil-id-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profil-id-tx {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.profil-id-name {
    font-size: 1rem;
    font-weight: 680;
    color: var(--c-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profil-id-mail {
    margin-top: 1px;
    font-size: 0.76rem;
    color: var(--c-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profil-id-cta {
    margin-top: 3px;
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--c-primary);
}
.profil-chev {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--c-text-muted);
}

/* ---------- Anonyme : les deux portes d'entrée ---------- */
.profil-anon {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 14px;
    background: var(--c-bg-card);
    border-radius: var(--r-lg);
    box-shadow: var(--v2-shadow-card);
}
.profil-anon-btn {
    min-height: var(--v2-touch);
    padding: 12px 18px;
    border-radius: var(--r-full);
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
    background: var(--c-bg-warm);
    color: var(--c-primary);
    border: 1px solid var(--c-border);
    -webkit-tap-highlight-color: transparent;
}
.profil-anon-btn.primary {
    background: var(--c-primary);
    color: var(--c-text-inverse);
    border-color: var(--c-primary);
}

/* ---------- Réglages déplacés ----------
   Le nœud #settingsBody arrive nu : c'est cette carte qui lui donne sa surface. */
.profil-settings-slot:not(:empty) {
    background: var(--c-bg-card);
    border-radius: var(--r-lg);
    box-shadow: var(--v2-shadow-card);
    padding: 4px 14px 14px;
}
/* Dans la modale, le premier titre n'a pas de marge haute (le header la porte) ; ici,
   il lui en faut une pour ne pas coller au bord de la carte. */
.profil-settings-slot .settings-section-title:first-child {
    margin-top: 14px;
}

/* Le pied de page porte PLUSIEURS blocs (rangées d'aide, puis déconnexion) : sans espacement
   propre ils se touchent — le `gap` de la vue ne s'applique qu'entre ses enfants directs,
   et le pied n'en est qu'UN. */
.profil-foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- Groupe de rangées (Aide & à propos) ---------- */
.profil-group {
    background: var(--c-bg-card);
    border-radius: var(--r-lg);
    box-shadow: var(--v2-shadow-card);
    overflow: hidden;
}
.profil-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--v2-touch);
    padding: 12px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.profil-row + .profil-row { border-top: 1px solid var(--c-border-light); }
.profil-row:active { background: var(--c-bg-warm); }
.profil-row-ic {
    width: 38px;
    height: 38px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-warm);
    color: var(--c-text-secondary);
}
.profil-row-t {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 640;
    color: var(--c-text);
}

/* ---------- Déconnexion ---------- */
.profil-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--v2-touch);
    padding: 14px;
    background: var(--c-bg-card);
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--v2-shadow-card);
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--c-danger);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.profil-logout:active { transform: scale(0.99); }

/* ---------- Topbar : l'avatar cède sa place à l'onglet ----------
   L'onglet Profil EST le menu compte sur mobile : garder l'avatar en plus créerait deux
   chemins vers la même chose (et le menu qu'il ouvre pointerait vers une modale Réglages
   dont le corps a été déplacé). @media obligatoire : body.has-tabbar est aussi posé sur
   desktop, où l'avatar et ses modales restent le chemin d'accès. */
@media (max-width: 767px) {
    body.has-tabbar .topbar-account-btn { display: none; }
}