/* =====================================================================
 * Semtopic, comptes : lien de l'en-tête, fenêtre de crédits, pages de
 * connexion, espace personnel et admin. Mêmes jetons que styles.css.
 * ===================================================================== */

/* ---------- Lien « Mon compte » de l'en-tête ---------- */
.topbar .site-nav a.nav-account { gap: 8px; }
.nav-credits {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--sapin); color: var(--papier);
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
}

.nav-short { display: none; }
@media (max-width: 820px) {
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .topbar .site-nav a.nav-account { gap: 5px; }
}

/* ---------- Fenêtre (crédits, confirmation) ---------- */
.acc-dialog {
  width: min(520px, calc(100vw - 32px)); padding: 0; border: 0;
  border-radius: var(--r-card); background: var(--neige); color: var(--sapin);
  box-shadow: 0 24px 60px rgba(29, 51, 39, 0.28);
}
.acc-dialog::backdrop { background: rgba(29, 51, 39, 0.45); }
.acc-dialog-body { padding: 28px 30px 26px; }
.acc-dialog h2 {
  font-family: var(--f-serif); font-weight: 400; font-size: 28px; line-height: 1.1;
  margin: 12px 0 14px; overflow-wrap: anywhere;
}
.acc-dialog p { margin: 0 0 12px; line-height: 1.55; }
.acc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }
.acc-actions .btn-ghost { align-self: center; }

/* ---------- Bandeau éphémère ---------- */
.acc-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px);
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--sapin); color: var(--papier); font-weight: 600; font-size: 15px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.acc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Analyse enregistrée ---------- */
.acc-saved {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin: 8px max(clamp(16px, 4vw, 56px), calc((100% - 1328px) / 2)) 0;
  padding: 12px 18px; border-radius: var(--r-card-sm);
  background: var(--neige); border: var(--hair) dashed var(--pierre-2); font-size: 15px;
}

/* ---------- Pages de compte ---------- */
.acc-main { max-width: 980px; margin: 0 auto; padding: 24px clamp(16px, 5vw, 56px) 72px; }
.acc-main.narrow { max-width: 560px; }
.acc-main h1 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(36px, 5vw, 54px); line-height: 1.04; letter-spacing: -0.02em;
  margin: 14px 0 12px; text-wrap: balance;
}
.acc-lead { font-size: 17px; line-height: 1.6; color: #3f5446; margin: 0 0 28px; }
.acc-card {
  background: var(--neige); border: var(--hair) solid var(--pierre);
  border-radius: var(--r-card); padding: 26px 28px; margin: 0 0 20px;
}
.acc-card h2 {
  font-family: var(--f-serif); font-weight: 400; font-size: 26px; line-height: 1.15;
  margin: 0 0 14px;
}
.acc-card p { line-height: 1.6; }

.acc-tabs { display: flex; gap: 6px; margin: 0 0 18px; flex-wrap: wrap; }
.acc-tabs button {
  min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  border: var(--hair) solid transparent; background: transparent; color: var(--sapin);
  font: 600 15px var(--f-sans); cursor: pointer;
}
.acc-tabs button[aria-selected="true"] { border-color: var(--sapin); background: var(--neige); }

.acc-form { display: grid; gap: 16px; }
.acc-form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.acc-form input[type="email"], .acc-form input[type="password"],
.acc-form input[type="text"], .acc-form input[type="number"] {
  width: 100%; min-height: 48px; padding: 10px 16px;
  border: var(--hair) solid var(--pierre-2); border-radius: 14px;
  background: #fff; color: var(--sapin); font: 16px var(--f-sans);
}
.acc-form input:focus-visible { outline: 2px solid var(--sapin); outline-offset: 2px; }
.acc-form .hint { font-weight: 400; font-size: 13px; color: var(--granit); }
.acc-check { display: flex !important; grid-template-columns: none; gap: 10px !important;
  align-items: flex-start; font-weight: 400 !important; }
.acc-check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.acc-form .btn-primary { justify-self: start; }
.acc-link { background: none; border: 0; padding: 0; color: var(--sapin); font: 600 15px var(--f-sans);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.acc-msg { margin: 0; padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.acc-msg:empty { display: none; }
.acc-msg.ok { background: var(--c1-tint); }
.acc-msg.err { background: var(--c3-tint); }

.acc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.acc-stats > div {
  padding: 16px 18px; border-radius: var(--r-card-sm); background: var(--papier);
}
.acc-stats b { display: block; font-family: var(--f-serif); font-weight: 400; font-size: 34px; line-height: 1.1; }
.acc-stats span { font-size: 14px; color: var(--granit); }

.acc-table-wrap { overflow-x: auto; margin: 0 -4px; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.acc-table th {
  text-align: left; font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--granit);
  padding: 8px 10px 10px 4px; border-bottom: var(--hair) solid var(--sapin);
}
.acc-table td { padding: 10px 10px 10px 4px; border-bottom: 1px dashed var(--pierre); vertical-align: middle; }
.acc-table td.num { font-family: var(--f-mono); white-space: nowrap; }
.acc-table .plus { color: oklch(0.45 0.11 145); }
.acc-table .row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.acc-empty { color: var(--granit); margin: 0; }
.acc-danger { border-color: var(--c3); }
.acc-inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.acc-inline label { flex: 1 1 200px; }

@media (max-width: 560px) {
  .acc-card { padding: 20px 18px; }
  .acc-dialog-body { padding: 22px 20px; }
  .acc-dialog h2 { font-size: 24px; }
}

/* =====================================================================
 * Aperçu gratuit : filigrane, données floutées, invitations
 * Le flou ne cache que du faux contenu : les vraies données réservées ne
 * sont jamais envoyées par le serveur (cf. app/accounts/preview.py).
 * ===================================================================== */
.is-preview .st-marked { position: relative; }

/* Filigrane : un motif large et léger, posé dans chaque carte (impression comprise). */
.st-watermark {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='420'%3E%3Ctext x='360' y='220' text-anchor='middle' transform='rotate(-20 360 210)' font-family='Figtree, Arial, sans-serif' font-size='22' font-weight='700' fill='%231d3327' fill-opacity='0.07'%3Esemtopic.com %C2%B7 aper%C3%A7u gratuit%3C/text%3E%3C/svg%3E");
  background-repeat: repeat; background-position: center 40px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.st-watermark.on-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='420'%3E%3Ctext x='360' y='220' text-anchor='middle' transform='rotate(-20 360 210)' font-family='Figtree, Arial, sans-serif' font-size='22' font-weight='700' fill='%23fbfaf4' fill-opacity='0.12'%3Esemtopic.com %C2%B7 aper%C3%A7u gratuit%3C/text%3E%3C/svg%3E");
}

/* Données brouillées par le serveur : chaque ligne marquée est floutée. */
.st-blur { filter: blur(5px); user-select: none; pointer-events: none; }
/* Carte thématique : 1er groupe complet ; pour les suivants, le nom seul. */
.is-preview #mapBody .massif:nth-child(n+2) .massif-meta,
.is-preview #mapBody .massif:nth-child(n+2) .massif-alt,
.is-preview #mapBody .massif:nth-child(n+2) .massif-gauge,
.is-preview #mapBody .massif:nth-child(n+2) .massif-foot,
.is-preview #mapBody .massif:nth-child(n+2) .massif-kws,
.is-preview #mapBody .massif:nth-child(n+2) .massif-focus {
  filter: blur(5px); user-select: none; pointer-events: none;
}
/* Rien de payant ni d'exportable en aperçu. */
.is-preview #rmExport, .is-preview #geoExtend, .is-preview .opt-local { display: none !important; }

/* Bandeau « Tout débloquer » au bas d'une carte partielle. */
.st-more {
  position: relative; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 20px; padding: 12px 16px; border-radius: var(--r-card-sm);
  border: var(--hair) dashed var(--pierre-2); background: var(--neige);
  font-size: 14px; color: var(--granit);
}
.st-more .btn-outline { padding: 8px 16px; font-size: 14px; }

.st-promo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin: 20px 0; padding: 18px 24px; border-radius: var(--r-card);
  border: var(--hair) dashed var(--sapin); background: var(--neige);
}
.st-promo p { margin: 0; font-size: 17px; }

.st-bar {
  position: sticky; bottom: 16px; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin: 24px max(clamp(16px, 4vw, 56px), calc((100% - 1328px) / 2)) 16px; padding: 14px 18px 14px 24px;
  border-radius: var(--r-card); background: var(--sapin); color: var(--papier);
  box-shadow: 0 14px 40px rgba(29, 51, 39, 0.3);
}
.st-bar b { color: #fff; }
.st-bar .btn-primary { background: var(--papier); color: var(--sapin); white-space: normal; text-align: center; }
.st-bar .btn-primary:hover { background: #fff; color: var(--sapin); }

@media (max-width: 560px) {
  .st-bar { padding: 14px 16px; bottom: 8px; }
  .st-bar .btn-primary { width: 100%; font-size: 15px; padding: 12px 16px; }
  .st-promo { padding: 16px 18px; }
}
@media print {
  .st-bar, .st-more, .st-promo .btn { display: none !important; }
}

/* ---------- Lien du compte dans l'en-tête du rapport d'audit ---------- */
.topbar-links { display: flex; align-items: center; gap: 10px; }
.topbar-result .nav-account { display: inline-flex; align-items: center; gap: 8px; }
.topbar-result .nav-account:hover .nav-credits { background: var(--papier); color: var(--sapin); }
@media (max-width: 820px) {
  .topbar-result .topbar-links .nav-account { display: inline-flex !important; padding: 8px 14px; font-size: 13px; }
}