/* ============================================================
   Les 4 pages techniques du compte — port de compte-technique-cible
   (zegame-prototypes, maquette Codex du 18 août, commits a775691/d787966).
   Scopé sous .pz-m0-compte, patron déjà suivi pour traces.css/heros.css/
   marelle.css : Bootstrap et pz_theme.css sont déjà chargés partout, un nom
   comme .primary ou .status-ok ne peut pas vivre dans l'espace global.

   PORTAGE PARTIEL, ASSUMÉ — la maquette n'est pas un reskin, elle promet
   des fonctions absentes du modèle réel (voir l'en-tête de chaque vue pour
   le détail par page) :
   - Sécurité : ni appareils connectés, ni double authentification, ni
     historique de connexion n'existent — seule la carte « email + lien de
     réinitialisation » est portée.
   - Notifications : la matrice 5 événements × 2 canaux de la maquette n'a
     pas d'équivalent réel (3 réglages seulement, de nature différente) —
     .choice-list (déjà présente dans la maquette pour un autre usage) sert
     de patron à la place de .notification-table.
   - CGU : le texte reste le squelette [à compléter] existant — la version
     acceptée et l'historique de consentements datés n'existent pas.
   - Paramètres : le formulaire existant (identité + profil + contact) est
     conservé intégralement — la scission Paramètres/Profil communautaire
     de la maquette n'est pas faite ici (écart documenté dans la vue).

   CE QUI N'EST PAS PORTÉ DU TOUT : le .app-header de la maquette (logo,
   roue, pastille Ω, avatar) fait doublon avec l'en-tête réel de
   layouts/jeu.html.haml — seul .account-subnav (les 4 onglets, patron
   nouveau, mais menant à 4 routes réelles) est repris. Les formulaires
   existants (_form.html.haml, notifications.html.haml) gardent leurs
   classes Bootstrap internes (.form-group, .btn-primary…) : seule
   l'ENVELOPPE (carte, en-tête de page, aside) porte le nouveau patron —
   les réécrire en interne aurait risqué de casser la soumission ou
   l'affichage des erreurs de validation, pour un gain visuel nul.
   ============================================================ */

.pz-m0-compte {
  --ink: #211920; --cream: #f7f2e9; --paper: #fffdfa; --line: #ddd3c7;
  --muted: #716a70; --purple: #922374; --purple-soft: #f5e8f1;
  --green: #35755c; --green-soft: #e7f2ed; --dark: #20171f;
  --shadow: 0 18px 50px rgba(30, 19, 27, .13);
}

/* --- Les 4 onglets, réels : mêmes routes que le menu déroulant --- */
.pz-m0-compte .account-subnav {
  display: flex; align-items: center; gap: 26px; margin: 0 0 28px;
  padding: 0 2px 14px; border-bottom: 1px solid var(--line); overflow-x: auto;
}
.pz-m0-compte .account-subnav a {
  flex: none; padding-bottom: 12px; color: var(--ink); text-decoration: none;
  font-size: 13px; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap;
}
.pz-m0-compte .account-subnav a.active { color: var(--purple); border-color: var(--purple); }

/* --- En-tête de page --- */
.pz-m0-compte .page-head { margin-bottom: 26px; }
.pz-m0-compte .page-head .eyebrow {
  display: block; margin-bottom: 6px; color: var(--purple); font-size: 11px;
  font-weight: 700; letter-spacing: .12em;
}
.pz-m0-compte .page-head h1 { font-family: "Roboto Slab", Georgia, serif; font-size: 34px; margin: 0 0 10px; }
.pz-m0-compte .page-head p { max-width: 720px; color: var(--muted); margin: 0; line-height: 1.55; }

/* --- Grille carte principale + aside (Paramètres uniquement) --- */
.pz-m0-compte .settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
.pz-m0-compte .settings-stack { display: grid; gap: 16px; }
.pz-m0-compte .settings-panel,
.pz-m0-compte .account-aside section {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 24px;
}
.pz-m0-compte .settings-panel > .eyebrow,
.pz-m0-compte .settings-panel h2 { display: block; }
.pz-m0-compte .settings-panel .eyebrow {
  color: var(--purple); font-size: 11px; font-weight: 700; letter-spacing: .11em;
}
.pz-m0-compte .settings-panel h2 { font-family: "Roboto Slab", Georgia, serif; font-size: 20px; margin: 6px 0 4px; }
.pz-m0-compte .account-aside { display: grid; align-content: start; gap: 16px; }
.pz-m0-compte .account-aside p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.pz-m0-compte .account-aside .secondary-link {
  display: inline-flex; margin-top: 10px; color: var(--purple); font-weight: 700; text-decoration: none; font-size: 13px;
}

/* --- Sécurité : carte unique, pas de grille à deux colonnes --- */
.pz-m0-compte .security-summary {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 17px;
}
.pz-m0-compte .security-summary .security-icon {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--green-soft); color: var(--green); font-size: 22px;
}
.pz-m0-compte .security-summary p { margin: 4px 0 0; color: var(--muted); }
.pz-m0-compte .security-summary .security-body { grid-column: 2; }
.pz-m0-compte .security-summary .security-cta { grid-column: 2; justify-self: start; margin-top: 14px; }

/* --- Notifications : liste de réglages, patron .choice-list de la maquette --- */
.pz-m0-compte .choice-list { display: grid; }
.pz-m0-compte .choice-list > .choice-row {
  padding: 16px 0; border-top: 1px solid var(--line);
}
.pz-m0-compte .choice-list > .choice-row:first-child { border-top: 0; padding-top: 4px; }
.pz-m0-compte .choice-list b { display: block; font-size: 14px; }
.pz-m0-compte .choice-list small { display: block; color: var(--muted); margin-top: 3px; font-size: 12px; }

/* --- CGU : le squelette existant, dans la même carte --- */
.pz-m0-compte .legal-panel { }
.pz-m0-compte .legal-panel h4 { font-family: "Roboto Slab", Georgia, serif; font-size: 16px; margin: 20px 0 6px; }
.pz-m0-compte .legal-panel h4:first-child { margin-top: 0; }
.pz-m0-compte .legal-panel p { color: var(--muted); line-height: 1.6; margin: 0 0 4px; }

@media (max-width: 900px) {
  .pz-m0-compte .settings-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pz-m0-compte .page-head h1 { font-size: 28px; }
  .pz-m0-compte .account-subnav { gap: 18px; font-size: 12px; }
}