/* ============================================================
   styles.css — Styles spécifiques au site public
   (header, hero, sections, articles, formulaires, etc.)
   ============================================================
   NOTE: les fondations (tokens, reset, layout, components)
   sont dans /core/*.css et doivent être chargées AVANT ce fichier.
   ============================================================ */

.route {
  opacity: 0;
  animation: routeIn 0.5s var(--ease) forwards;
}
@keyframes routeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Surcharge contextuelle de .eyebrow-icon dans les en-têtes de page */
.page-header .eyebrow-icon {
  background: rgba(212, 162, 74, 0.18);
  box-shadow: 0 0 0 1px rgba(212, 162, 74, 0.25);
}


.page-header {
  position: relative;
  background: #0A1F38;
  color: white;
  padding: clamp(60px, 8vw, 120px) 0 clamp(60px, 7vw, 100px);
  overflow: hidden;
  isolation: isolate;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 35%, rgba(50, 188, 236, 0.18) 0%, rgba(10, 31, 56, 0) 50%),
    radial-gradient(circle at 78% 35%, transparent 79px, rgba(35, 111, 168, 0.25) 80px, rgba(35, 111, 168, 0.25) 81px, transparent 82px),
    radial-gradient(circle at 78% 35%, transparent 159px, rgba(35, 111, 168, 0.2) 160px, rgba(35, 111, 168, 0.2) 161px, transparent 162px),
    radial-gradient(circle at 78% 35%, transparent 239px, rgba(35, 111, 168, 0.15) 240px, rgba(35, 111, 168, 0.15) 241px, transparent 242px),
    radial-gradient(circle at 78% 35%, transparent 319px, rgba(35, 111, 168, 0.1) 320px, rgba(35, 111, 168, 0.1) 321px, transparent 322px);
  pointer-events: none;
  z-index: 0;
}
.page-header::after {
  content: '';
  position: absolute;
  top: 35%;
  left: 78%;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-gold) 0%, var(--c-gold) 16%, rgba(212, 162, 74, 0.5) 17%, rgba(212, 162, 74, 0.5) 100%);
  pointer-events: none;
  z-index: 0;
}
.page-header .container {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-right: auto;
  margin-left: max(var(--gutter), calc((100vw - var(--content-w)) / 2 + var(--gutter)));
  padding-left: 0;
  padding-right: var(--gutter);
}
.page-header .eyebrow { color: var(--c-cyan); }
.page-header h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 24px;
  color: white;
}
.page-lede {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 580px;
  font-weight: 400;
}

@media (max-width: 760px) {
  .page-header::after {
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    top: 25%;
    left: 85%;
  }
  .page-header .container { padding-right: var(--gutter); margin-left: var(--gutter); }
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  padding: clamp(60px, 8vw, 100px) 0;
}
@media (min-width: 900px) { .content-grid { grid-template-columns: 1.6fr 1fr; gap: 80px; } }
.content-grid h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 34px);
  margin-top: 48px;
}
.content-grid h2:first-child { margin-top: 0; }
.content-grid p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-ink);
}
.aside-card {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  align-self: start;
  padding: 32px;
  background: var(--c-cream);
  border-radius: 0;
  border-top: 4px solid var(--c-gold);
}
.aside-card h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 12px;
}
.aside-card p { font-size: 14px; margin-bottom: 20px; }
.aside-card hr { border: none; border-top: 1px solid var(--c-line); margin: 24px 0; }
.aside-card .aside-small { font-size: 13px; color: var(--c-mute); margin-bottom: 0; }

.disciplines { padding: 0 0 clamp(60px, 8vw, 100px); }
.disciplines > h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -0.02em;
  margin-bottom: 48px;
}
.disc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 760px) { .disc-grid { grid-template-columns: repeat(3, 1fr); } }
.disc-card {
  padding: 36px 28px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 0;
  position: relative;
  transition: all 0.3s var(--ease);
}
.disc-card:hover {
  border-color: var(--c-cyan);
  transform: translateY(-4px);
}
.disc-num {
  font-family: var(--f-display);

  font-weight: 500;
  font-size: 14px;
  color: var(--c-gold);
  display: block;
  margin-bottom: 8px;
}
.disc-card h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 12px;
}
.disc-card p { font-size: 14px; color: var(--c-mute); margin: 0; }

.results-section, .agenda-section { padding: clamp(48px, 6vw, 80px) 0; }
.results-section h2, .agenda-section h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 32px;
}
.results-list li {
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--c-line);
  transition: padding 0.3s var(--ease);
}
.results-list li:hover { padding-left: 16px; }
.results-list li:last-child { border-bottom: 1px solid var(--c-line); }
.result-date {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.result-body h3 { font-size: 17px; margin-bottom: 4px; font-weight: 600; }
.result-body p { margin: 0; font-size: 14px; color: var(--c-mute); }
.result-medal { font-size: 26px; text-align: right; }

.agenda-list { display: grid; gap: 12px; }
.agenda-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  background: var(--c-cream);
  border-radius: 0;
  transition: all 0.3s var(--ease);
}
.agenda-list li:hover { background: var(--c-deep); color: white; }
.agenda-list li:hover .agenda-date { color: var(--c-cyan); }
.agenda-date {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-mute);
  padding: 12px 0;
  border: 1px solid var(--c-line);
  border-radius: 0;
  transition: color 0.3s var(--ease);
}
.agenda-date strong {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 26px;
  display: block;
  color: var(--c-deep);
  margin-bottom: 2px;
  letter-spacing: 0;
  transition: color 0.3s var(--ease);
}
.agenda-list li:hover .agenda-date strong { color: white; }
.agenda-body { font-size: 14px; line-height: 1.5; }
.agenda-body strong { font-size: 16px; font-weight: 600; }

.training-slots { padding: 60px 0 clamp(60px, 8vw, 100px); }
.training-slots--top {
  padding: clamp(40px, 6vw, 60px) 0 clamp(48px, 6vw, 64px);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 48px;
}
.training-slots h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 32px;
}
.training-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.training-slot {
  padding: 24px;
  background: var(--c-cream);
  border-radius: 0;
  border-left: 3px solid var(--c-blue);
  transition: all 0.3s var(--ease);
}
.training-slot:hover { background: white; border-left-color: var(--c-gold); box-shadow: 0 8px 20px rgba(10,31,56,0.06); }
.training-slot h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 8px;
}
.training-slot p { font-size: 14px; color: var(--c-mute); margin: 0; }
.training-slot-tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
  padding: 3px 10px;
  background: rgba(35,111,168,0.08);
  border-radius: 0;
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: clamp(60px, 8vw, 100px) 0 60px;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  padding: 32px 28px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 0;
  position: relative;
  transition: all 0.3s var(--ease);
}
.step:hover { border-color: var(--c-blue); transform: translateY(-4px); }
.step-num {
  font-family: var(--f-display);

  font-weight: 500;
  font-size: 56px;
  color: var(--c-gold);
  display: block;
  line-height: 1;
  margin-bottom: 16px;
}
.step h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 12px;
}
.step p { font-size: 14px; color: var(--c-mute); margin: 0; line-height: 1.6; }

.pricing { padding: 40px 0 clamp(60px, 8vw, 100px); }
.pricing h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 48px;
  text-align: center;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 800px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card {
  padding: 40px 32px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 0;
  position: relative;
  transition: all 0.3s var(--ease);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(10,31,56,0.15); }
.pricing-card--featured {
  background: var(--c-deep);
  color: white;
  border-color: var(--c-deep);
  transform: scale(1.03);
}
@media (max-width: 800px) { .pricing-card--featured { transform: none; } }
.pricing-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: var(--c-gold);
  color: var(--c-deep);
  border-radius: 0;
}
.pricing-card h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 4px;
}
.pricing-card-age {
  font-size: 13px;
  color: var(--c-mute);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
}
.pricing-card--featured .pricing-card-age { color: rgba(255,255,255,0.6); }
.pricing-card-price {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  color: var(--c-deep);
  margin-bottom: 28px;
  letter-spacing: -0.03em;
}
.pricing-card--featured .pricing-card-price { color: var(--c-cyan); }
.pricing-card-currency { font-size: 28px; vertical-align: top; margin-left: 4px; color: var(--c-mute); }
.pricing-card--featured .pricing-card-currency { color: rgba(255,255,255,0.6); }
.pricing-card ul { padding-top: 16px; border-top: 1px solid var(--c-line); }
.pricing-card--featured ul { border-top-color: rgba(255,255,255,0.15); }
.pricing-card ul li {
  padding: 10px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pricing-card ul li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-cyan);
  flex-shrink: 0;
}
.pricing-note { text-align: center; font-size: 14px; color: var(--c-mute); margin-top: 32px; }

.cta-band {
  padding: clamp(50px, 7vw, 80px);
  background: linear-gradient(135deg, var(--c-blue), var(--c-deep));
  border-radius: 0;
  text-align: center;
  margin-bottom: clamp(60px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
}
.cta-band::after {
  content: '';
  position: absolute;
  top: -30%;
  right: 5%;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(212,162,74,0.3);
  border-radius: 50%;
}
.cta-band h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  color: white;
  margin-bottom: 24px;
  position: relative;
}
.cta-band .btn { position: relative; }

/* ============================================================
   CONTACT PAGE — New layout (trombinoscope top, info + map, CTA)
   ============================================================ */

/* === Addresses block === */
/* List of all club venues, HQ first. Each address gets its own card
   with the textual address on the left and an embedded Google Map on
   the right. Stacks on narrow screens. */

.contact-addresses {
  padding: clamp(48px, 6vw, 72px) 0;
}
.contact-addresses > h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 36px);
  margin: 0 0 32px;
  color: var(--c-deep);
}
.contact-addresses-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-address-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  padding: 24px;
}
.contact-address-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.contact-address-card-head h3 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--c-deep);
}
.badge-hq {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  background: var(--c-gold);
  color: var(--c-deep);
}

.contact-address-card-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 800px) {
  .contact-address-card-body {
    grid-template-columns: 1fr 1.5fr;
    gap: 28px;
  }
}

.contact-address-card-text {
  font-style: normal;
  color: var(--c-deep);
  line-height: 1.6;
  font-size: 15px;
}

.contact-address-card-map {
  width: 100%;
  min-height: 280px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.contact-address-card-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}

/* === Contact info + CTA (side-by-side on desktop) === */
/* "Nous joindre" on the left, "Nous écrire" CTA on the right.
   Stacks vertically below ~800px. Vertical centering keeps the
   CTA visually balanced against the taller contact-info block. */

.contact-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: clamp(48px, 6vw, 72px) 0;
  border-top: 1px solid var(--c-line);
  align-items: center;
}
@media (min-width: 800px) {
  .contact-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

/* "Nous joindre" mirrors the CTA's centered layout for visual symmetry,
   on both desktop (side-by-side) and mobile (stacked). */
.contact-info {
  text-align: center;
}
.contact-info h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 36px);
  margin-bottom: 24px;
}
.contact-info h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin: 28px 0 8px;
}
.contact-info a { color: var(--c-deep); }
.contact-info .social-list {
  justify-content: center;
}

/* === CTA block === */
/* Centered inside its column on desktop, full-width on mobile.
   Padding/border removed in the side-by-side layout — the wrapper
   (.contact-bottom) handles them now. */
.contact-cta {
  text-align: center;
}
.contact-cta h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 36px);
  margin: 0 0 16px;
  color: var(--c-deep);
}
.contact-cta p {
  color: var(--c-mute);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

/* Contact form inside the modal: tighten spacing slightly, remove the
   visible h2 (the modal head already shows "Nous écrire"). */
.contact-form--in-modal h2 { display: none; }
.contact-form--in-modal {
  background: transparent;
  padding: 0;
  border: 0;
}
/* ============================================================
   SOCIAL LINKS — Icon buttons (Facebook, Instagram, ...)
   ============================================================
   Used in:
     - the contact page (light background)
     - the site footer (dark background)
   Behaviour:
     - Default: subtle icon-only with label hidden by default on
       desktop (just the icon shows), label visible on hover.
     - On hover: button takes the official brand color
       (Facebook blue for FB, Instagram gradient for IG).
   ============================================================ */

.social-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: var(--c-paper);
  color: var(--c-deep);
  text-decoration: none;
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
  overflow: hidden;
}
.social-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* Hide the text label by default; it's still in the DOM for screen readers. */
.social-link-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Brand-color hover */
.social-link--facebook:hover,
.social-link--facebook:focus-visible {
  background: #1877F2;
  color: white;
  border-color: #1877F2;
  transform: translateY(-2px);
}
.social-link--instagram:hover,
.social-link--instagram:focus-visible {
  /* Instagram uses a gradient; we approximate with the official magenta/orange */
  background: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
}
.social-link:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

/* === Footer variant: dark background === */
.site-footer .social-link {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
}
.site-footer .social-link--facebook:hover {
  background: #1877F2;
  color: white;
  border-color: #1877F2;
}
.site-footer .social-link--instagram:hover {
  background: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
  color: white;
  border-color: transparent;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  background: var(--c-cream);
  border-radius: 0;
}
.contact-form label { display: flex; flex-direction: column; gap: 6px; }
.contact-form label span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--f-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: white;
  color: var(--c-ink);
  transition: border-color 0.2s var(--ease);
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(35,111,168,0.1);
}
.contact-form button { margin-top: 8px; align-self: flex-start; }

/* === Formulaire de connexion (modale, mode Supabase) === */
.login-lede {
  margin: 0 0 20px;
  color: var(--c-mute);
  font-size: 15px;
  line-height: 1.5;
}
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.login-field input {
  font-family: var(--f-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: white;
  color: var(--c-ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.login-field input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(35, 111, 168, 0.1);
}
.login-submit { width: 100%; margin-top: 4px; }
.login-error,
.login-feedback { margin: 0; font-size: 14px; line-height: 1.45; }
.login-error { color: #b3261e; }
.login-feedback { color: var(--c-blue); }
.login-forgot {
  align-self: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-forgot:hover { color: var(--c-deep); }

.site-footer {
  background: var(--c-deep);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 32px;
  margin-top: 80px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); } }
.brand--footer { color: white; margin-bottom: 16px; }
.brand--footer .brand-logo { filter: brightness(0) invert(1); width: 40px; height: 40px; }
.brand--footer .brand-name { color: white; }
.footer-tag {
  font-family: var(--f-display);

  font-size: 15px;
  max-width: 280px;
}
.site-footer h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin-bottom: 16px;
}
.site-footer nav ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s var(--ease);
}
.site-footer a:hover { color: white; }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.04em;
  margin: 0;
}

@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--c-paper);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    padding: 24px var(--gutter);
    gap: 16px;
    transform: translateY(-110%);
    opacity: 0;
    transition: all 0.3s var(--ease);
    pointer-events: none;
  }
  .primary-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 12px 24px rgba(10,31,56,0.08);
  }
  .primary-nav ul {
    flex-direction: column;
    gap: 2px;
    width: 100%;
  }
  .primary-nav ul a {
    display: block;
    width: 100%;
    height: auto;
    padding: 14px 12px;
    font-size: 16px;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
  }
  .primary-nav ul a::before { display: none; }
  .primary-nav ul a.active {
    background: rgba(35, 111, 168, 0.06);
    border-radius: 0;
  }
  .cta-nav {
    text-align: center;
    width: 100%;
    height: 48px;
  }
  .brand-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

.nav-login {
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-mute);
  padding: 8px 12px;
  border-radius: 0;
  transition: color 0.2s var(--ease);
}
.nav-login:hover { color: var(--c-deep); }
.nav-login.active { color: var(--c-blue); }


.auth-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--gutter);
  background: var(--c-cream);
}
.auth-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 0;
  padding: 48px 40px;
  max-width: 440px;
  width: 100%;
}
.auth-card h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 32px;
  margin-bottom: 8px;
}
.auth-lede { font-size: 14px; color: var(--c-mute); margin-bottom: 32px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form label span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.auth-form input {
  font-family: var(--f-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: white;
  transition: border-color 0.2s var(--ease);
}
.auth-form input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(35,111,168,0.1);
}
.auth-form button { margin-top: 8px; justify-content: center; }
.auth-error {
  background: #FEE2E2;
  color: #991B1B;
  padding: 10px 14px;
  border-radius: 0;
  font-size: 13px;
  margin: 0;
}
.auth-demo {
  border-top: 1px solid var(--c-line);
  padding-top: 24px;
}
.auth-demo-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: 12px;
}
.auth-demo-row {
  font-size: 13px;
  color: var(--c-mute);
  margin-bottom: 6px;
}
.auth-demo-note {
  font-size: 12px;
  color: var(--c-mute);
  margin-top: 12px;
  margin-bottom: 0;
}
.auth-demo-note code {
  background: var(--c-cream);
  padding: 2px 6px;
  border-radius: 0;
  font-family: ui-monospace, monospace;
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--c-blue);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.member-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 48px 0 80px;
}
@media (min-width: 900px) { .member-grid { grid-template-columns: 260px 1fr; gap: 48px; } }

.member-side { display: flex; flex-direction: column; gap: 24px; }
.member-card {
  background: var(--c-cream);
  border-radius: 0;
  padding: 28px 24px;
  text-align: center;
  border-top: 3px solid var(--c-blue);
}
.member-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-deep);
  color: white;
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.member-name {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 4px;
}
.member-mail { font-size: 13px; color: var(--c-mute); margin: 0 0 16px; word-break: break-all; }

.member-nav { display: flex; flex-direction: column; gap: 2px; }
.member-nav-link {
  background: none;
  border: none;
  text-align: left;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--c-ink);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.member-nav-link:hover { background: var(--c-cream); }
.member-nav-link.active {
  background: var(--c-deep);
  color: white;
  font-weight: 500;
}

.member-main h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  margin: 32px 0 16px;
}
.member-main h2:first-child { margin-top: 0; }
.member-main h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin: 32px 0 16px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.status-card {
  padding: 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.status-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.status-value {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--c-deep);
  margin-top: 4px;
}
.status-value--ok { color: #15803d; }
.status-sub { font-size: 13px; color: var(--c-mute); }

.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--c-line);
  align-items: baseline;
}
.timeline li:last-child { border-bottom: 1px solid var(--c-line); }
.timeline-date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.timeline-body { font-size: 14px; line-height: 1.5; }

.payment-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 0;
  padding: 24px;
  margin-bottom: 32px;
}
.payment-card--ok { border-left: 3px solid #15803d; border-radius: 0; }
.payment-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
}
.payment-row:last-of-type { border-bottom: none; }
.payment-label { color: var(--c-mute); }
.payment-val { font-weight: 500; }
.payment-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); }

.history-list { display: flex; flex-direction: column; }
.history-list li {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--c-line);
  align-items: center;
  font-size: 14px;
}
.history-list li:last-child { border-bottom: 1px solid var(--c-line); }
.history-date { color: var(--c-mute); font-size: 13px; }
.history-amount { font-weight: 500; color: var(--c-deep); }

.doc-list { display: flex; flex-direction: column; gap: 12px; }
.doc-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 0;
}
.doc-icon { font-size: 22px; }
.doc-name { font-weight: 500; margin: 0; font-size: 14px; }
.doc-meta { font-size: 12px; color: var(--c-mute); margin: 2px 0 0; }

.profil-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 600px;
}
.profil-form label { display: flex; flex-direction: column; gap: 6px; }
.profil-form label span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.profil-form input {
  font-family: var(--f-body);
  font-size: 15px;
  padding: 11px 14px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: white;
  transition: border-color 0.2s var(--ease);
}
.profil-form input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(35,111,168,0.1);
}
.profil-form button { align-self: flex-start; margin-top: 8px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.admin-wrap {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - var(--header-h));
}
@media (min-width: 900px) { .admin-wrap { grid-template-columns: 260px 1fr; } }

.admin-side {
  background: var(--c-deep);
  color: white;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 900px) {
  .admin-side {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
  }
}
.admin-brand-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-cyan);
  display: block;
  margin-bottom: 8px;
}
.admin-brand-user { font-size: 14px; color: rgba(255,255,255,0.8); margin: 0; }

.admin-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-nav-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  text-align: left;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.admin-nav-link:hover { background: rgba(255,255,255,0.08); color: white; }
.admin-nav-link.active {
  background: var(--c-cyan);
  color: var(--c-deep);
  font-weight: 600;
}
.admin-logout { background: transparent; color: white !important; border-color: rgba(255,255,255,0.3); }
.admin-logout:hover { background: rgba(255,255,255,0.08); }

.admin-main { padding: 32px 32px 64px; background: var(--c-cream); }
@media (max-width: 600px) { .admin-main { padding: 24px 16px 48px; } }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
.admin-header h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 30px;
  margin: 0 0 4px;
}
.admin-header p { margin: 0; font-size: 13px; color: var(--c-mute); }
.admin-header-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.admin-search, .admin-filter {
  font-family: var(--f-body);
  font-size: 13px;
  padding: 9px 14px;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: white;
  min-width: 200px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.kpi {
  padding: 20px;
  background: white;
  border-radius: 0;
  border: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
}
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.kpi-value {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--c-deep);
  margin: 8px 0 4px;
  letter-spacing: -0.02em;
}
.kpi-value--warn { color: #B45309; }
.kpi-trend { font-size: 12px; color: var(--c-mute); }
.kpi-trend--up { color: #15803d; }

.dashboard-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 800px) { .dashboard-cols { grid-template-columns: 1fr 1fr; } }
.dashboard-block {
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 0;
  padding: 24px;
}
.dashboard-block h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 16px;
}
.mini-list { display: flex; flex-direction: column; }
.mini-list li {
  padding: 12px 0;
  border-top: 1px solid var(--c-line);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.mini-list li:first-child { border-top: none; padding-top: 0; }
.mini-list .ml-name { font-weight: 500; }
.mini-list .ml-meta { font-size: 12px; color: var(--c-mute); }

.table-wrap {
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 0;
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table thead th {
  text-align: left;
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mute);
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line);
}
.data-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
}
.data-table tbody tr:hover { background: rgba(35,111,168,0.03); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .row-name { font-weight: 500; }
.data-table .row-mail { color: var(--c-mute); font-size: 13px; }
.data-table .row-actions { white-space: nowrap; }
.icon-btn {
  background: none;
  border: 1px solid var(--c-line);
  width: 30px;
  height: 30px;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  font-size: 14px;
}
.icon-btn:hover { background: var(--c-cream); border-color: var(--c-blue); }

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.article-tile {
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 0;
  overflow: hidden;
  transition: all 0.3s var(--ease);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.article-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,31,56,0.08); }
.article-tile-cover {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, #236FA8, #32BCEC);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
}
.article-tile-body { padding: 16px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.article-tile-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  margin: 0 0 8px;
  line-height: 1.3;
}
.article-tile-meta {
  font-size: 12px;
  color: var(--c-mute);
  margin: 0 0 12px;
}
.article-tile-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.editor-back { margin-bottom: 24px; }
.editor-form {
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 0;
  padding: 32px;
}
.editor-title-label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.editor-title-label span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mute);
}
#editor-title {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--c-line);
  outline: none;
}
#editor-title:focus { border-bottom-color: var(--c-blue); }

.editor-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tool-btn {
  background: white;
  border: 1px solid var(--c-line);
  padding: 6px 12px;
  border-radius: 0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.tool-btn:hover { background: var(--c-cream); border-color: var(--c-blue); color: var(--c-blue); }
.tool-divider { width: 1px; height: 24px; background: var(--c-line); margin: 0 4px; }

.editor-content {
  min-height: 240px;
  padding: 16px 0;
  font-size: 16px;
  line-height: 1.7;
  outline: none;
}
.editor-content:empty::before {
  content: attr(data-placeholder);
  color: var(--c-mute);
  font-style: italic;
}
.editor-content h2 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  margin: 24px 0 12px;
}
.editor-content ul { padding-left: 1.5rem; }

.editor-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.editor-media:empty { display: none; }
.media-item {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--c-cream);
}
.media-item img, .media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-item-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}
.media-item-type {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 2px 8px;
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.editor-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
  flex-wrap: wrap;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.settings-card {
  background: white;
  border: 1px solid var(--c-line);
  border-radius: 0;
  padding: 24px;
}
.settings-card h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 12px;
}
.settings-card p { font-size: 14px; margin: 0 0 4px; }
.settings-meta { font-size: 13px; color: var(--c-mute); margin-bottom: 16px !important; }

/* Loading / empty states for the public training-slots grid */
.training-slots-loading,
.training-slots-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  font-style: italic;
  color: var(--c-mute);
  margin: 0;
}

/* ============================================================
   GOVERNANCE — Trombinoscope (public, on Contact page)
   ============================================================
   Two stacked sections, "Le bureau" and the rest of the CA.
   Cards are flat, angular (per the brand's --r-md: 0), with
   either an uploaded avatar or initials on a deterministic
   brand color.
============================================================ */

.governance-showcase {
  padding: 64px 0 80px;
  border-top: 1px solid var(--c-line);
  margin-top: 64px;
}
/* When the showcase is placed at the top of the Contact page (right
   below the page header), remove the top border + margin so it sits
   flush against the header. */
.governance-showcase--top {
  border-top: 0;
  margin-top: 0;
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

.governance-showcase-head {
  margin: 48px 0 24px;
}
.governance-showcase-head:first-child { margin-top: 0; }
.governance-showcase-head h2 {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--c-deep);
  margin: 0 0 8px;
  line-height: 1.2;
}
.governance-showcase-lede {
  color: var(--c-mute);
  margin: 0;
  font-size: 15px;
}

.governance-board-note {
  font-size: 14px;
  color: var(--c-mute);
  background: var(--c-cream);
  padding: 14px 18px;
  margin: 32px 0 0;
  border-left: 3px solid var(--c-gold);
}

.governance-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px;
}

.governance-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  padding: 24px 16px;
  text-align: center;
  transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.governance-card:hover {
  border-color: var(--c-blue);
  transform: translateY(-2px);
}

.governance-card-avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.governance-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.governance-card-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.governance-card-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-deep);
  margin: 0 0 4px;
  line-height: 1.3;
}
.governance-card-title {
  font-size: 13px;
  color: var(--c-blue);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Mobile: keep at least 2 columns down to ~340px, switch to 1 below. */
@media (max-width: 480px) {
  .governance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .governance-card { padding: 18px 10px; }
  .governance-card-avatar {
    width: 64px; height: 64px;
  }
  .governance-card-avatar-initials { font-size: 22px; }
}