/* ============================================================
   CHIDO Café — societaire.css
   Ce qui n'existe que sur Devenir sociétaire : le tableau de
   l'apport, les engagements, le bulletin de demande et la sortie.
   Le héros, les offres (.plans), les blocs numérotés et les liens
   fléchés viennent de base.css.
   Charge base.css avant celle-ci.
   ============================================================ */

/* --- l'apport ---
   Un tableau et non trois cartes : le lecteur compare deux colonnes
   ligne à ligne, c'est exactement ce qu'un tableau sait faire.
   Il défile seul sur petit écran plutôt que d'imposer un défilement
   horizontal à toute la page. */
.apport { margin-top: clamp(1.75rem, 3vw, 2.25rem); overflow-x: auto; }
.apport table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
}
.apport th,
.apport td {
  padding: 0.85rem 1rem;
  border-bottom: 0.0625rem solid rgba(18, 15, 16, 0.16);
  font-size: 0.92rem;
  line-height: 1.5;
  vertical-align: top;
}
.apport thead th {
  border-bottom: var(--stroke-thin);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
/* la première colonne nomme la ligne : en mono, comme toutes les
   étiquettes de donnée du site */
.apport tbody th {
  width: 12rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.apport tbody tr:last-child th,
.apport tbody tr:last-child td { border-bottom: 0; }
.apport strong { font-weight: 700; }
.apport__note {
  margin: 1.25rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --- les engagements ---
   Pas de cartes : ce sont quatre clauses. Un filet en tête et le
   numéro en petites capitales suffisent à les séparer. */
.commits { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); margin-top: clamp(2rem, 4vw, 2.75rem); }
.commit { display: grid; gap: 0.55rem; padding-top: 1rem; border-top: var(--stroke-thin); }
.commit__num {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink);
}
.commit__title { margin: 0; }
.commit p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }

/* --- le bulletin ---
   Quatre étapes numérotées dans un seul formulaire : le PDF les
   présente ainsi et c'est la bonne unité — une demande de sociétariat
   ne se découpe pas en quatre écrans. */
.bulletin {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: var(--stroke);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--pop-sm);
}
/* Le leurre anti-robots du module 014 : invisible pour une personne, rempli
   par les robots qui parcourent le DOM — et l'envoi part alors à la poubelle
   sans un mot. `left:-9999px` et pas `display:none` : un champ vraiment caché,
   beaucoup de robots savent le reconnaître et l'éviter. */
.bulletin__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bulletin__step { border: 0; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); padding: 0; }
.bulletin__step:last-of-type { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.bulletin__legend {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin: 0 0 1.1rem;
  padding: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.bulletin__legend::after {
  content: "";
  flex: 1;
  height: 0.0625rem;
  background: var(--ink);
  opacity: 0.2;
}

/* `.fields`, `.field`, `.checks` et `.check` vivent désormais dans
   `base.css` : l'espace client s'en sert aussi. */

/* le récapitulatif de ce qui sera payé : la seule chose que personne ne
   doit pouvoir dire n'avoir pas vue */
.bulletin__recap {
  margin: 1.5rem 0 0;
  padding: 1rem 1.15rem;
  border-left: 0.375rem solid var(--turquoise);
  background: rgba(8, 184, 180, 0.08);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.88rem;
  line-height: 1.6;
}
.bulletin__submit { margin-top: 1.5rem; }
.bulletin__after { margin: 1rem 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--muted); }

/* --- la sortie et le cadre juridique --- */
.exits { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: clamp(2rem, 4vw, 2.75rem); }
.exit { padding-left: clamp(1rem, 2vw, 1.35rem); border-left: 0.375rem solid var(--yellow); }
.exit__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--paper);
}
.section--ink .exit p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--paper); }

.legalbox {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 0.0625rem solid var(--line-dark);
}
.legalbox ul { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; }
.section--ink .legalbox li,
.section--ink .legalbox p {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255, 253, 244, 0.7);
}
.legalbox a { border-bottom: 0.0625rem solid currentColor; }
.legalbox a:hover { color: var(--yellow); }

@media (min-width: 48rem) {
  .commits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem); }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
  .exits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}