/*
 * Toulouse Founders — global styles.
 * The page layout itself lives as inline styles in the views to stay faithful
 * to the source design; this file holds the global rules, interactions and the
 * responsive overrides (which need !important to win over inline styles).
 */

html { scroll-behavior: smooth; }
body { margin: 0; background: #1B1815; }
* { box-sizing: border-box; }

::selection { background: #CA6B4B; color: #1B1815; }

input, textarea, select { font-family: 'Spectral', serif; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #CA6B4B !important; }

.tf-cta:hover { background: #b85b3d !important; }
.tf-ghost:hover { color: #ECE3D6 !important; border-color: #CA6B4B !important; }
.tf-login:hover { color: #ECE3D6 !important; }

/* --- Auth (login / mot de passe) : champs sur fond sombre --- */
.tf-darkin { background: #231f1b; border: 1px solid #34302a; border-radius: 3px; padding: 14px 16px; font-size: 16px; color: #ECE3D6; width: 100%; }
.tf-darkin:focus { outline: none; border-color: #CA6B4B !important; }
.tf-darkin::placeholder { color: #6f655c; }
.tf-link:hover { color: #ECE3D6 !important; }

/* --- Back-office admin --- */
.tf-row:hover { background: #f3ebdd !important; }
.tf-accept:hover { background: #3F7A4E !important; color: #fff !important; border-color: #3F7A4E !important; }
.tf-reject:hover { background: #B0492C !important; color: #fff !important; border-color: #B0492C !important; }
.tf-neutral:hover { border-color: #1B1815 !important; color: #1B1815 !important; }
.tf-account:hover { background: #f3ebdd !important; }
.tf-menuitem:hover { background: #f6e2da !important; }
.tf-relance:hover { background: #CA6B4B !important; color: #fff !important; border-color: #CA6B4B !important; }
.tf-toplink:hover { color: #1B1815 !important; }
.tf-list::-webkit-scrollbar { width: 10px; }
.tf-list::-webkit-scrollbar-thumb { background: #ddd2bf; border-radius: 5px; }
/* Account dropdown via <details> — hide the default marker */
.tf-account-menu > summary { list-style: none; }
.tf-account-menu > summary::-webkit-details-marker { display: none; }

/* Annuaire member cards */
.tf-member-card { transition: border-color .18s, transform .18s; }
.tf-member-card:hover { border-color: #CA6B4B !important; transform: translateY(-2px); }

/* Clickable event cards / rows (whole card links to the detail page) */
.tf-event-card { transition: border-color .15s, box-shadow .15s; }
.tf-event-card:hover { border-color: #CA6B4B !important; box-shadow: 0 6px 24px rgba(27, 24, 21, .08); }
.tf-pastrow { transition: background .15s; }
.tf-pastrow:hover { background: #fcf9f3; }

/* Expertise toggle chips (checkbox-driven, no JS) */
.tf-chip-input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-chip { display: inline-block; font-family: 'Spectral', serif; font-size: 14px; color: #5c5048; background: #faf7f1; border: 1px solid #e3d8c7; border-radius: 30px; padding: 7px 15px; cursor: pointer; user-select: none; transition: .12s; }
.tf-chip-input:checked + .tf-chip { color: #1B1815; background: #CA6B4B; border-color: #CA6B4B; }
.tf-chip-input:checked + .tf-chip::before { content: "✓ "; }
.tf-chip-input:focus-visible + .tf-chip { outline: 2px solid #CA6B4B; outline-offset: 2px; }

/* Expertise (domain) toggle chips — Space Mono, uppercase. Share the hidden
   .tf-chip-input checkbox with the sujet chips above. */
.tf-dchip { display: inline-block; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #5c5048; background: #faf7f1; border: 1px solid #e3d8c7; border-radius: 30px; padding: 7px 15px; cursor: pointer; user-select: none; transition: .12s; }
.tf-chip-input:checked + .tf-dchip { color: #1B1815; background: #CA6B4B; border-color: #CA6B4B; }
.tf-chip-input:checked + .tf-dchip::before { content: "✓ "; }
.tf-chip-input:focus-visible + .tf-dchip { outline: 2px solid #CA6B4B; outline-offset: 2px; }

/* Custom confirmation checkbox (cooptation) */
.tf-checkbox-input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-checkbox { width: 20px; height: 20px; border-radius: 3px; background: #faf7f1; border: 1px solid #c9bba8; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tf-checkbox-input:checked + .tf-checkbox { background: #CA6B4B; border-color: #CA6B4B; }
.tf-checkbox-input:checked + .tf-checkbox::after { content: "✓"; font-size: 13px; color: #1B1815; line-height: 1; }
.tf-checkbox-input:focus-visible + .tf-checkbox { outline: 2px solid #CA6B4B; outline-offset: 2px; }

/* Mobile hamburger menu (member header + admin topbar). A native <details>
   toggle (no JS); the panel drops down anchored to the header. Hidden on desktop,
   shown at each layout's breakpoint (see the media queries below). */
.tf-burger { display: none; }
.tf-burger > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 9px; cursor: pointer; font-size: 19px; line-height: 1; flex-shrink: 0; background: none; }
.tf-burger > summary::-webkit-details-marker { display: none; }
.tf-burger-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
/* The panel is absolutely positioned, so the native <details> closed-state
   hiding doesn't reach it — hide it explicitly until the menu is open. */
.tf-burger:not([open]) .tf-burger-menu { display: none; }
.tf-members .tf-burger > summary { border: 1px solid #4a3f36; color: #ECE3D6; }
.tf-members .tf-burger-menu { background: #1B1815; border-top: 1px solid #34302a; border-bottom: 1px solid #34302a; box-shadow: 0 16px 30px rgba(0, 0, 0, .3); }
.r-app .tf-burger > summary { border: 1px solid #e3d8c7; color: #1B1815; }
.r-app .tf-burger-menu { background: #fff; border-bottom: 1px solid #e3d8c7; box-shadow: 0 16px 30px rgba(27, 24, 21, .13); }

/* Tablet and below: collapse multi-column grids, tighten gutters and titles. */
@media (max-width: 900px) {
  .tf-grid-3 { grid-template-columns: 1fr !important; }
  .tf-grid-2 { grid-template-columns: 1fr !important; gap: 28px !important; }
  .tf-process { grid-template-columns: 1fr !important; gap: 40px !important; }
  .tf-form-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .tf-section { padding-left: 24px !important; padding-right: 24px !important; }
  .tf-header { padding-left: 24px !important; padding-right: 24px !important; }
  .tf-hero-inner { padding: 50px 24px 90px !important; }
  .tf-h1 { font-size: 48px !important; }
  .tf-manifesto { font-size: 30px !important; }
  .tf-h2 { font-size: 36px !important; }
}

/* Phones: stack the email/phone row and shrink the hero headline further. */
@media (max-width: 560px) {
  .tf-form-row { flex-direction: column !important; gap: 20px !important; }
  .tf-h1 { font-size: 38px !important; }
  .tf-manifesto { font-size: 26px !important; }
  .tf-h2 { font-size: 30px !important; }
  .tf-section { padding-top: 72px !important; padding-bottom: 72px !important; }
}

/*
 * Espace membre / annuaire / onboarding / admin — responsive.
 * These pages port the Claude Design mockups, which collapse to mobile via a set
 * of semantic `r-*` utility classes. Each layout is rendered alone (multi-page
 * app, Turbo off), but application.css is global, so the rules are scoped per
 * layout (.tf-members, .tf-onboarding, .r-app) to keep the same class name from
 * meaning different sizes across pages — matching each mockup's own breakpoint.
 */

/* Annuaire / espace membre — 760px (cf. design « Annuaire ») */
@media (max-width: 760px) {
  .tf-members .r-head { height: auto !important; padding: 12px 18px !important; flex-wrap: wrap !important; gap: 12px !important; }
  .tf-members .r-head-left { gap: 16px !important; }
  .tf-members .r-sticky-off { position: relative !important; }
  .tf-members .r-hide-sm { display: none !important; }
  .tf-members .tf-burger { display: block !important; }
  .tf-members .r-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .tf-members .r-secv { padding-top: 40px !important; padding-bottom: 64px !important; }
  .tf-members .r-g { grid-template-columns: 1fr !important; }
  .tf-members .r-formgrid { flex-direction: column !important; }
  .tf-members .r-h1 { font-size: 36px !important; }
  .tf-members .r-q { font-size: 25px !important; }
  /* Évènements */
  .tf-members .r-feat { grid-template-columns: 1fr !important; }
  .tf-members .r-plaque { flex-direction: row !important; align-items: baseline !important; gap: 14px !important; padding: 24px 26px !important; }
  .tf-members .r-plaque-num { font-size: 52px !important; }
  .tf-members .r-row { flex-wrap: wrap !important; gap: 16px !important; }
  .tf-members .r-row-act { width: 100% !important; justify-content: flex-start !important; }
  .tf-members .r-feat-title { font-size: 30px !important; }
}

/* Onboarding — 760px (cf. design « Onboarding ») */
@media (max-width: 760px) {
  .tf-onboarding .r-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .tf-onboarding .r-formgrid { flex-direction: column !important; }
  .tf-onboarding .r-h1 { font-size: 42px !important; }
  .tf-onboarding .r-h2 { font-size: 32px !important; }
}

/* Back-office admin — 860px (cf. design « Admin »). Scoped to .r-app, admin-only. */
@media (max-width: 860px) {
  .r-app { height: auto !important; min-height: 100vh !important; }
  .r-app .r-topbar { height: auto !important; flex-wrap: wrap !important; padding: 10px 16px !important; gap: 10px 14px !important; }
  .r-app .r-twopane { flex-direction: column !important; }
  .r-app .r-listpane { width: 100% !important; border-right: none !important; border-bottom: 1px solid #e3d8c7 !important; max-height: 46vh !important; }
  .r-app .r-detailpane { overflow: visible !important; }
  .r-app .r-g { grid-template-columns: 1fr !important; }
  .r-app .r-tablewrap { overflow-x: auto !important; }
  .r-app .r-trow { min-width: 720px !important; }
  .r-app .r-pad { padding-left: 18px !important; padding-right: 18px !important; }
  .r-app .r-h1 { font-size: 30px !important; }
  .r-app .r-hide-sm { display: none !important; }
  .r-app .tf-burger { display: block !important; }
}