/* Carte The One, version membre (22/10/2026, Antoine : « la même card que sur la page d'accueil, la dernière qu'on a faite »).
   Base : carte-the-one.css (.tgo-card, bloc « Votre carte The One » de l'accueil). Ici, seulement ce qui change quand la carte porte
   les données réelles d'un membre : photo ou initiales, signature, QR réservé ou actif, facettes choisies.
   Style guide : https://thegoodone.ai/styleguide.html, « Carte The One et trame ». Montage et mises à jour : carte-membre.js. */
.tgo-card-stage { width: min(100%, 560px); margin: 18px auto 4px; }
.tgo-card--membre { animation: none; text-align: left; }
/* Photo : portrait du membre, ou initiales sur fond pervenche. Jamais la photo d'exemple de l'accueil. */
.tgo-card--membre .tgo-photo { display: grid; place-items: center; overflow: hidden; background: var(--accent); color: var(--ink); font: 800 clamp(20px, 3.6vw, 36px)/1 var(--display); letter-spacing: -.05em; }
.tgo-card--membre .tgo-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tgo-card--membre .tgo-id { min-width: 0; }
.tgo-card--membre .tgo-id strong { overflow-wrap: anywhere; }
.tgo-card--membre .tgo-id span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
/* QR : en réserve (gabarit à tirets, aucun faux QR) tant que le partage n'est pas activé, puis le QR en trame du membre. */
.tgo-card--membre .tgo-qr { position: relative; min-width: 0; }
.tgo-card--membre .tgo-qr.is-reserved { display: grid; place-items: center; padding: 4px; border: 1px dashed var(--outline); background: var(--white); color: var(--ink); text-align: center; }
.tgo-card--membre .tgo-qr.is-reserved span { font: 500 clamp(8px, .9vw, 9px)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tgo-card--membre .tgo-qr .qr-declic { width: 100%; height: 100%; }
/* Facettes : celles que le membre a cochées, une pastille ✓ chacune (sans le cycle d'animation de l'accueil). */
.tgo-card--membre .tgo-facets { min-height: 1.9em; }
.tgo-card--membre .tgo-facets span.ok:before { animation: none; opacity: 1; margin-right: .4em; }
/* Accent pervenche : sur les pages de l'espace --cta est l'encre (le citron y est retiré, DESIGN.md §11), il disparaîtrait sur le fond encre de la carte. */
.tgo-card--membre .tgo-id small, .tgo-card--membre .tgo-facets span.ok:before { color: var(--accent); }
/* Lisibilité : sur la carte du membre, qui relit son propre texte, rien sous 10 px en capitales ni sous 10 px en minuscules. */
.tgo-card--membre .tgo-id small, .tgo-card--membre .tgo-facets span { font-size: 10px; }
.tgo-card--membre .tgo-id span { font-size: clamp(10px, 1.05vw, 12px); }
.tgo-card--membre .tgo-facets span.none { border-style: dashed; color: rgb(249 241 231 / 70%); }
.tgo-card-caption { margin: 14px 0 0; text-align: center; color: var(--muted); font: 400 12px/1.5 var(--mono); }
@media (max-width: 480px) {
  .tgo-card--membre.tgo-card { padding: 12px; }
  .tgo-card--membre .tgo-card-body { grid-template-columns: 28% minmax(0, 1fr) 24%; gap: 8px; }
}

/* ——— Fiche « Votre carte » aux couleurs Déclic (22/10/2026) : liste à filets, fenêtre de relecture plate ——— */
html[data-design="declic"] .horizontal-sheet .presentation-preview { background: var(--surface); border: 1px solid var(--line); border-radius: 0; }
html[data-design="declic"] .presentation-preview-label { font: 500 10px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
html[data-design="declic"] .horizontal-sheet .presentation-heading .eyebrow { font: 500 10px/1.5 var(--mono); letter-spacing: .13em; }
html[data-design="declic"] .presentation-step { font: 500 10px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
html[data-design="declic"] .presentation-review-heading h3 { font: 800 30px/1.1 var(--display); letter-spacing: -.055em; }
html[data-design="declic"] .presentation-headline-label { font: 500 10px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
/* Facettes : une ligne par facette, filet encre quand elle est sur la carte, aucune boîte. */
html[data-design="declic"] .horizontal-sheet .presentation-facets { display: block; padding: 0 10px 0 0; max-height: 330px; }
html[data-design="declic"] .horizontal-sheet .presentation-facet { padding: 14px 0 14px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html[data-design="declic"] .horizontal-sheet .presentation-facet:last-child { border-bottom: 1px solid var(--line); }
html[data-design="declic"] .horizontal-sheet .presentation-facet.is-included { border-top-color: var(--ink); background: transparent; box-shadow: inset 3px 0 0 var(--ink); }
html[data-design="declic"] .horizontal-sheet .presentation-facet label { margin: 0 0 8px; font: 500 10px/1.5 var(--mono); letter-spacing: .13em; color: var(--muted); }
html[data-design="declic"] .horizontal-sheet .presentation-facet input[type=checkbox] { accent-color: var(--ink); width: 18px; height: 18px; }
html[data-design="declic"] .facet-preview { font-family: var(--mono); }
html[data-design="declic"] .facet-preview-title { font: 800 19px/1.2 var(--display); letter-spacing: -.045em; margin-bottom: 6px; }
html[data-design="declic"] .facet-preview-body { font: 400 12px/1.65 var(--mono); -webkit-line-clamp: 2; }
html[data-design="declic"] .facet-preview-status { margin-top: 8px; font: 600 11px/1.5 var(--mono); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Fenêtre de relecture d'une facette : surface blanche, filet encre, angles vifs, sans flou ni ombre. */
html[data-design="declic"] .facet-lens { border: 1px solid var(--ink); border-radius: 0; background: var(--white); backdrop-filter: none; box-shadow: none; font: 400 13px/1.7 var(--mono); }
html[data-design="declic"] .facet-lens .eyebrow, html[data-design="declic"] .facet-lens label { font: 500 10px/1.5 var(--mono); letter-spacing: .13em; }
html[data-design="declic"] .facet-lens #facetLensTitle { font: 800 30px/1.12 var(--display); letter-spacing: -.055em; }
html[data-design="declic"] .facet-lens textarea { font: 400 14px/1.7 var(--mono); border-radius: 0; }
html[data-design="declic"] .facet-lens-actions { background: var(--white); }
html[data-design="declic"] .facet-lens-actions button { min-height: 46px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 600 12px/1.4 var(--mono); }
html[data-design="declic"] .facet-lens-actions button:hover { background: var(--accent); }
html[data-design="declic"] .facet-lens-actions button[data-include=yes] { background: var(--ink); color: var(--bg); }
html[data-design="declic"] .facet-lens-actions button[data-include=yes]:hover { background: var(--accent); color: var(--ink); }
@media (max-width: 850px) { html[data-design="declic"] .horizontal-sheet .presentation-facets { max-height: 360px; } }