/*
 * membre.css — Standalone member pages (login, sign-up, account, "My family",
 * "Find yourself", photo suggestion, password pages…), rendered by
 * lib/page.php.
 *
 * These pages used to look like another site: no header, no menu, no footer,
 * and the system font instead of Be Vietnam Pro. They now share the public
 * site's header (brand, language, member links) and footer, and every style
 * they need lives here, on the design-system tokens, instead of inline.
 */

  /* --- Sélecteur de langue --- */
  .lang-switch { display: flex; justify-content: center; gap: 6px; margin-bottom: var(--sp-5); }
  .lang-switch .ls-btn {
    padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
    font-size: .8rem; font-weight: 600; color: var(--fg-soft);
    text-decoration: none; background: #fff; line-height: 1.4;
  }
  .lang-switch .ls-btn.on { background: var(--c-laque); color: #fff; border-color: var(--c-laque); }
  /* --- Mise en page centrée pour les écrans d'authentification --- */
  
  .auth-wrap { width: 100%; max-width: 440px; }
  .auth-card { padding: var(--sp-8); }
  .auth-head { text-align: center; margin-bottom: var(--sp-6); }
  .auth-head .seal { margin: 0 auto var(--sp-3); }
  .auth-head h1 { margin: 0 0 var(--sp-1); font-size: 1.5rem; }
  .auth-head p { margin: 0; color: var(--fg-soft); font-size: .95rem; }

  .form-field { display: block; margin-bottom: var(--sp-4); }
  .form-field label {
    display: block; margin-bottom: var(--sp-1);
    font-weight: 600; font-size: .9rem; color: var(--c-encre);
  }
  .form-field input, .form-field textarea, .form-field select {
    width: 100%; padding: var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: inherit; background: #fff; color: var(--c-encre);
  }
  .form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    outline: 2px solid var(--c-or-texte); outline-offset: 2px; border-color: var(--c-or);
    box-shadow: 0 0 0 3px rgba(169,128,58,.18);
  }
  .form-field small { color: var(--fg-soft); font-size: .8rem; }
  .btn-block { width: 100%; justify-content: center; }

  /* Pot de miel : masqué aux humains, laissé aux robots. */
  .hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

  .alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); margin-bottom: var(--sp-5); font-size: .92rem; }
  .alert-error { background: var(--c-err-fond); color: var(--c-laque-deep); border: 1px solid rgba(154,43,33,.3); }
  .alert-ok    { background: var(--c-ok-fond); color: var(--c-jade); border: 1px solid rgba(46,111,94,.3); }
  .alert-info  { background: var(--c-ivoire-2); color: var(--c-encre); border: 1px solid var(--border); }
  .alert ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; }

  /* Sign-up: what to have ready, shown before the form. */
  .regles-inscription { background: var(--c-ivoire-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); font-size: .92rem; }
  .regles-inscription p { margin: 0; }
  .regles-inscription ul { margin: var(--sp-2) 0; padding-left: 1.2em; }
  /* A field the server refused: marked, with its own message right under it. */
  .form-field.has-error input { border-color: var(--c-laque-deep); }
  .form-field .field-error { display: block; color: var(--c-laque-deep); font-size: .8rem; margin-top: var(--sp-1); }

  .auth-links { margin-top: var(--sp-5); text-align: center; font-size: .9rem; }
  .auth-links a { color: var(--c-laque); }
  .muted { color: var(--fg-soft); }
  /* Écrans qui ne sont pas des cartes de connexion (assistant de traduction) :
     la largeur d'un formulaire à deux champs y serait à l'étroit. */
  .auth-wrap.auth-wide { max-width: 760px; }

/* ── Page frame: site header, centred content, site footer ─────────────── */
body.page-body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--c-ivoire-3), var(--c-ivoire-2));
}
.page-main { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: var(--sp-8) var(--sp-4); }
.page-header .hbar-top { padding: 10px 0; }
.page-header .brand { text-decoration: none; color: var(--fg); }
.page-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.page-nav a {
  font-size: 12.5px; font-weight: 500; color: var(--fg-soft); padding: 7px 10px;
  border-radius: var(--r-md); text-decoration: none; white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center;
}
.page-nav a:hover { color: var(--fg); background: rgba(169,128,58,.07); }
.page-nav a.on { color: var(--accent); }
.page-nav a.page-nav-cta { background: var(--accent); color: #fff; border-radius: 999px; font-weight: 700; padding: 6px 16px; min-height: 36px; margin-left: 6px; }
.page-nav a.page-nav-cta:hover { background: var(--c-laque-deep); color: #fff; }
.page-header .lang a {
  font-family: var(--f-sans); font-weight: 600; font-size: 11.5px; letter-spacing: .08em;
  color: var(--fg-soft); padding: 6px 11px; text-decoration: none; min-width: 40px; min-height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.page-header .lang a.on { background: var(--fg); color: var(--c-ivoire-3); }
.page-foot {
  border-top: 1px solid var(--border); padding: var(--sp-5) var(--sp-4); text-align: center;
  font-size: .82rem; color: var(--fg-soft); display: flex; gap: 6px 16px; flex-wrap: wrap; justify-content: center;
}
.page-foot a { color: var(--fg-soft); }
.page-foot a:hover { color: var(--accent); }
@media (max-width: 720px) {
  .page-header .hbar-top { flex-wrap: wrap; }
  .page-nav { order: 3; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .page-nav a { padding: 6px 8px; min-height: 40px; }
  .page-nav a:first-child { display: none; }   /* the brand already leads home */
  .page-main { padding: var(--sp-5) var(--sp-3); }
  .auth-card { padding: var(--sp-5); }
}
/* Links inside messages look like links. */
.alert a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Shared pieces of the member pages (no inline styles) ─────────────── */
.page-intro { text-align: center; margin: 0 0 var(--sp-5); }
.page-intro-tight { margin-bottom: var(--sp-3); }
.page-intro-small { font-size: var(--fs-sm); }
.page-lead { text-align: center; font-weight: 600; margin: 0 0 var(--sp-2); }
.page-subtitle { font-size: var(--fs-md); margin: var(--sp-6) 0 0; }
.page-h2 { font-size: var(--fs-md); margin: 0 0 var(--sp-4); }
.page-sep { border: none; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
.page-after { margin: var(--sp-3) 0 0; }
.check-label { display: flex; gap: var(--sp-2); align-items: flex-start; font-weight: 400; }
.check-label input { width: auto; margin-top: 4px; }

/* "My family" and "Find yourself" */
.fam-c { margin: 0 0 var(--sp-5); }
.fam-c h2 { font-size: .95rem; margin: 0 0 var(--sp-2); color: var(--fg-soft); text-transform: uppercase; letter-spacing: .04em; }
.fam-c ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.fam-p { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
.fam-p:first-child { border-top: 0; }
.fam-n { font-weight: 600; }
.fam-m { color: var(--fg-soft); font-size: .85rem; margin-left: var(--sp-2); }
.fam-l { display: block; font-size: .85rem; margin-top: 2px; }
.fam-l a { color: var(--c-laque); }
.fam-dead .fam-n { color: var(--fg-soft); }
.fam-self ul { border-color: var(--c-or); box-shadow: 0 0 0 2px rgba(169,128,58,.15); }
.fam-hint { color: var(--fg-soft); font-size: .85rem; margin: 0 0 var(--sp-5); text-align: center; }

.assist-hint { color: var(--fg-soft); font-size: .85rem; margin: 0 0 var(--sp-4); }
.assist-results { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.assist-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-4); background: #fff; }
.assist-card h3 { margin: 0 0 var(--sp-1); font-size: 1.05rem; }
.assist-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sp-3); margin: 0 0 var(--sp-3); font-size: .88rem; color: var(--fg-soft); }
.assist-card dt { font-weight: 600; color: var(--c-encre); }
.assist-card dd { margin: 0; }
.assist-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.assist-actions form { margin: 0; }
.btn-link { background: none; border: 0; color: var(--c-laque); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.assist-hint-after { margin-top: var(--sp-4); }

/* "What happens now" panel (lib/attente.php) */
.hdn-attente { margin: var(--sp-5) 0 0; }
.hdn-attente h2 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.hdn-attente h3 { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.wait-steps { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
.wait-steps li { display: flex; gap: 10px; align-items: flex-start; }
.wait-mark { flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; background: var(--border); color: var(--fg-soft); }
.hdn-attente-done .wait-mark { background: var(--c-jade); color: #fff; }
.hdn-attente-current .wait-mark { background: var(--accent); color: #fff; }
.hdn-attente-next strong { color: var(--fg-soft); }
.wait-desc { display: block; color: var(--fg-soft); font-size: var(--fs-sm); }
.wait-then { margin: 0 0 var(--sp-5); padding-left: 1.2em; font-size: var(--fs-sm); }
.wait-read { margin: 0; font-size: var(--fs-sm); }
.wait-read a { color: var(--accent); }

/* "My contributions" (mon-compte.php) */
.mycontrib-none { margin: 0; }
.mycontrib-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mycontrib { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: #fff; }
.mycontrib-head { display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.mycontrib-state { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-soft); }
.mycontrib-done { color: var(--c-jade); }
.mycontrib-refused { color: var(--accent); }
.mycontrib-date { font-size: var(--fs-xs); }
.mycontrib-text { font-size: var(--fs-sm); margin-top: 4px; white-space: pre-line; }
.mycontrib-reply { font-size: var(--fs-sm); margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--border); white-space: pre-line; }

/* Style guide (admin/guide-style.php) */
.guide .auth-card { max-width: none; }
.guide-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.guide-swatch { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); }
.guide-chip { height: 44px; border-radius: var(--r-md); border: 1px solid var(--border); }
.guide-type { margin: 0 0 var(--sp-2); line-height: 1.3; }
.guide-type code { font-size: var(--fs-xs); color: var(--fg-soft); }
.guide-spaces { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); font-size: var(--fs-xs); }
.guide-bar { display: inline-block; height: 12px; background: var(--gold-soft); vertical-align: middle; margin-right: var(--sp-2); }
.guide-radius { display: inline-block; width: 40px; height: 24px; border: 2px solid var(--gold); vertical-align: middle; margin-right: var(--sp-2); }
.guide-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin: 0 0 var(--sp-6); }
.guide-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); margin: 0 0 var(--sp-6); }
.guide-table th, .guide-table td { text-align: left; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border); vertical-align: top; }
.guide-table td code { overflow-wrap: anywhere; }

.since-banner { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--c-surface); border-radius: 6px; font-size: .92rem; }
.since-banner p { margin: 0; }

/* ── The public gate (tim-minh.php): made for a phone first ─────────────────
   Big targets (48 px), one column, inputs at 16 px or more so that iOS does not zoom on focus. */
.porte .auth-card { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.porte-intro { font-size: var(--fs-md); margin: 0 0 var(--sp-4); }
.porte-form input[type="search"] { font-size: var(--fs-md); min-height: 48px; }
.porte-form .btn { min-height: 48px; font-size: var(--fs-md); }
.porte-plus { margin: 0 0 var(--sp-4); }
.porte-plus summary { cursor: pointer; color: var(--c-or-texte); padding: var(--sp-2) 0; min-height: 44px; }
.porte-q { margin: var(--sp-6) 0 var(--sp-2); }
.porte-res, .porte-rel { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.porte-res-a { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); min-height: 48px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--c-ivoire-3); color: var(--c-encre); text-decoration: none; }
.porte-res-a:hover, .porte-res-a:focus-visible { border-color: var(--c-or); }
.porte-res-a strong { font-size: var(--fs-md); }
.porte-res-a span { font-size: var(--fs-sm); color: var(--fg-soft); }
.porte-res-a .porte-res-go { color: var(--c-laque); font-weight: 600; margin-top: var(--sp-1); }
.porte-ancetre h2 { margin: 0; }
.porte-ancetre p { margin: var(--sp-1) 0 0; }
.porte-rel-btn { min-height: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.porte-rel-btn strong { font-size: var(--fs-md); }
.porte-rel-btn span { font-size: var(--fs-sm); color: var(--fg-soft); }
.porte-carte { display: block; width: 100%; height: auto; border-radius: var(--r-md); margin: 0 0 var(--sp-4); }
.porte-carte-txt { background: var(--c-laque); color: var(--c-ivoire-3); padding: var(--sp-6) var(--sp-4); display: grid; gap: var(--sp-2); }
.porte-carte-txt strong { font-size: 1.5rem; }
.porte-partage { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-6); }
.porte-partage .btn { min-height: 48px; }
/* .btn is display:inline-flex, which beats the hidden attribute: the share-sheet button stays hidden until tim-minh.js finds the Web Share API. */
.porte-partage [hidden] { display: none; }
.porte-partage .btn-link { min-height: 44px; }
.porte-copie { color: var(--c-jade); text-align: center; }
.porte-entrer { border-top: 1px solid var(--border); padding-top: var(--sp-4); margin-top: var(--sp-4); }
.porte-entrer h2 { margin: 0 0 var(--sp-2); }
.porte-entrer .btn { min-height: 48px; }
.porte-groupe, .porte-arbre { margin: var(--sp-4) 0 0; }
.porte-prive { margin-top: var(--sp-6); font-size: var(--fs-sm); }
@media (min-width: 640px) {
  .porte-rel { grid-template-columns: 1fr 1fr; }
}

/* The journey drawn by the committee (tim-minh.php, Ma famille, relais.php). */
.porte-res-a .porte-res-rel { color: var(--c-or-texte); font-weight: 600; }
.porte-lignee { list-style: none; margin: var(--sp-4) 0; padding: 0 0 0 var(--sp-4); border-left: 2px solid var(--c-or); display: grid; gap: var(--sp-3); }
.porte-lignee li { display: flex; flex-direction: column; gap: 2px; }
.porte-lignee-rel { font-size: var(--fs-sm); color: var(--c-or-texte); font-weight: 600; }
.porte-lignee strong { font-size: var(--fs-md); }
.porte-lignee-gen { font-size: var(--fs-sm); color: var(--fg-soft); }
.porte-deja { margin: var(--sp-3) 0 0; text-align: center; }
.porte-aine { margin: var(--sp-6) 0 0; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--c-ivoire-3); }
.porte-aine summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.porte-aine-msg { margin: var(--sp-3) 0; padding: var(--sp-3); border-left: 3px solid var(--c-or); background: var(--c-ivoire-2); }
.porte-fam .btn { min-height: 48px; }
.relais-msg { white-space: normal; }
.porte-deja a, .porte-groupe a, .porte-arbre a { color: var(--c-laque); text-decoration: underline; text-underline-offset: 3px; }