/* Les pages du compte client (#2228) : connexion, validation du lien, espace — et les Tarifs (#2230). Elles posent `vitrine.css`
   (palette, police, barre, boutons) et n'ajoutent ici que le panneau et le formulaire. */

.page-compte main { min-height: 100vh; display: grid; place-items: center; padding: 6rem 1rem 3rem; }
.panneau {
  width: min(28rem, 100%);
  padding: 2rem clamp(1.2rem, 4vw, 2.2rem);
  border: 1px solid var(--line); border-radius: 16px;
  background: rgba(24, 19, 14, .88);
}
.panneau h1 { font-size: 1.35rem; color: var(--marque); }
.panneau p { color: var(--muted); margin: 0 0 1.2rem; font-size: .97rem; }
.panneau .bouton { border: 0; cursor: pointer; width: 100%; text-align: center; }
.panneau .bouton:disabled { opacity: .55; cursor: wait; transform: none; }
.panneau .bouton.fantome { margin-top: .8rem; }

.champ { display: block; margin-bottom: 1rem; }
.champ span { display: block; margin-bottom: .3rem; color: var(--txt2); font-size: .9rem; }
.champ small { color: var(--muted); }
.champ input {
  width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel2); color: var(--txt); font: inherit;
}
.champ input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Le message d'une réponse : neutre, réussi ou en échec. Vide, il ne prend pas de place. */
.message { min-height: 1.4em; margin: 1rem 0 0; font-size: .93rem; }
.message.ok { color: var(--encre-ok); }
.message.ko { color: #fca5a5; }

.identite { margin: 0 0 1.4rem; padding: .9rem 1rem; border-radius: 10px; background: var(--panel2); }
.identite strong { display: block; color: var(--txt); }
.identite span { color: var(--muted); font-size: .9rem; }

/* La page Tarifs (#2230) : des cartes de formules, plus larges que le panneau d'un formulaire. */
.tarifs { width: min(68rem, 100%); }
.tarifs h1 { color: var(--marque); text-align: center; }
.tarifs .chapeau { color: var(--muted); text-align: center; max-width: 44rem; margin: 0 auto 1rem; }
.tarifs .message { text-align: center; }
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.formules:empty { display: none; }
.formule {
  display: flex; flex-direction: column;
  padding: 1.6rem 1.4rem; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(24, 19, 14, .88);
}
.formule[hidden] { display: none; }
.formule h2 { margin: 0 0 .2rem; font-size: 1.2rem; color: var(--txt); }
.formule-lieu { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.formule-prix { margin: 0 0 1rem; color: var(--muted); }
.formule-prix strong { color: var(--marque); font-size: 1.5rem; }
.formule-description { flex: 1; color: var(--txt2); font-size: .95rem; }
.formule .bouton { border: 0; cursor: pointer; text-align: center; }
.formule .bouton:disabled { opacity: .55; cursor: wait; transform: none; }
.formule.beta { border-color: var(--accent); }

/* L'administration des licences (#2231) : les cartes des formules, une par licence. */
.licences .chapeau code { color: var(--txt2); }
.licences .formules { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.licences .formule-description { white-space: pre-line; flex: 0; margin-bottom: 1rem; }
.licences textarea {
  width: 100%; resize: vertical; font: .78rem/1.35 ui-monospace, monospace; word-break: break-all;
  color: var(--txt); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 8px; padding: .5rem;
}

/* « Mon abonnement » (#2233) : les cartes de la page Tarifs, une par abonnement, avec sa licence. */
.espace { width: min(52rem, 100%); }
/* Un display posé ici (flex, inline-block) l'emporterait sur [hidden] : celui-ci a le dernier mot. */
.espace [hidden] { display: none !important; }
.espace .identite { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.espace .bouton { border: 0; cursor: pointer; text-align: center; }
.espace .bouton.fantome { border: 1px solid var(--accent); }
.espace .bouton:disabled { opacity: .55; cursor: wait; transform: none; }
.espace .formules { grid-template-columns: 1fr; }
.abonnement dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; font-size: .95rem; }
.abonnement dt { color: var(--muted); }
.abonnement dd { margin: 0; color: var(--txt); overflow-wrap: anywhere; }
.abo-note { margin: 0 0 1rem; padding: .7rem .9rem; border-left: 3px solid var(--marque); border-radius: 6px;
  background: var(--panel2); color: var(--txt2); font-size: .93rem; }
.abo-sieges { display: flex; align-items: end; gap: .8rem; flex-wrap: wrap; }
.abo-sieges .champ { width: 7rem; }
.abo-sieges .bouton { margin-bottom: 1rem; }
.abo-licence { margin-top: .6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.abo-licence h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--marque); }
.abo-licence-etat { color: var(--txt2); margin: 0 0 1rem; }
.abo-licence textarea {
  width: 100%; resize: vertical; font: .78rem/1.35 ui-monospace, monospace; word-break: break-all;
  color: var(--txt); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 8px; padding: .5rem;
}
.abo-marche { margin: 1rem 0; padding-left: 1.3rem; color: var(--txt2); font-size: .93rem; }
.abo-marche li + li { margin-top: .3rem; }
.abo-lier { margin-top: 1rem; }
.abo-instance { display: inline-block; margin-top: .6rem; }
.espace-gestes { margin-top: 1.6rem; text-align: center; }
.espace-gestes p { color: var(--muted); font-size: .93rem; margin: 1rem auto 0; max-width: 40rem; }
.espace-gestes a:not(.bouton) { color: var(--marque); }
.espace .chapeau a { color: var(--marque); }

/* ── les pages légales (#2234) : du texte long, à lire ── */
.legal { max-width: 46rem; margin: 2rem auto; padding: 0 1rem; line-height: 1.6; }
.legal h1, .legal h2 { margin-top: 2rem; }
.legal table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.legal th, .legal td { border: 1px solid var(--line); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.legal blockquote { margin: 1rem 0; padding: .1rem 1rem; border-left: 3px solid var(--line); color: var(--muted); }