/* ==========================================================================
   TEAM XC DU LÉGUER — THEME CSS SUR-MESURE POUR YAPLA (ESPACE MEMBRES)
   ==========================================================================
   À copier-coller ou uploader dans :
   Yapla > Paramètres de votre site / Espace membre > Personnalisation CSS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --txc-night: #061827;
  --txc-night-light: #082035;
  --txc-blue: #0057d9;
  --txc-blue-hover: #0046b0;
  --txc-cyan: #00d4ff;
  --txc-yellow: #ffcb05;
  --txc-bg: #f8fafc;
  --txc-card: #ffffff;
  --txc-border: #e2e8f0;
  --txc-text: #0f172a;
  --txc-muted: #64748b;
  --txc-radius: 14px;
}

/* 1. RESET GLOBAL & SUPPRESSION DE LA TEXTURE SOMBRE CASIMAGES */
html,
body,
body.pageid-85213,
.default,
#site-wrapper,
.site-inner {
  font-size: 16px !important;
  background-color: var(--txc-bg) !important;
  background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px) !important;
  background-size: 24px 24px !important;
  background-attachment: scroll !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--txc-text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Bandeau officiel en haut de page */
#site-wrapper::before {
  content: "ESPACE ADHÉRENTS & GESTION — TEAM XC DU LÉGUER";
  display: block;
  background: #020c15;
  color: #94a3b8;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-align: center !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Annulation de tous les anciens rectangles gris sur les textes */
span,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6,
label,
li,
a {
  background-color: transparent !important;
}

/* 2. EN-TÊTE DU SITE (HEADER BLANC ÉPURÉ — VISIBILITÉ MAXIMALE DU LOGO) */
.line.site_line__item.line-header,
.zone-header {
  background: #ffffff !important;
  border-bottom: 2px solid var(--txc-blue) !important;
  padding: 16px 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Alignement Flexbox pour empêcher Yapla d'écraser le logo */
.mod-header-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.mod-header-part.mod-header-part__left {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 250px !important;
}

.mod-header-part.mod-header-part__left a {
  display: block !important;
  position: static !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: opacity 0.2s ease !important;
}

.mod-header-part.mod-header-part__left a:hover {
  opacity: 0.88 !important;
}

/* Logo officiel grand format, 100% net, lisible et sans aucun cadre noir/blanc */
.mod-header-logo {
  content: url("https://team-xc-leguer-v3.netlify.app/logos/logo_final.png") !important;
  display: block !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 250px !important;
  max-width: 280px !important;
  height: auto !important;
  max-height: 72px !important;
  object-fit: contain !important;
}

/* Masquer la vieille miniature de vélo posée au milieu */
.header-ext-custom {
  display: none !important;
}

/* Partie droite du header */
.mod-header-part.mod-header-part__right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.mod-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Salutation membre connecté ("BIENVENUE PRÉNOM NOM") */
.member-greeting {
  color: var(--txc-night) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 8px 14px !important;
  margin-right: 10px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  display: inline-block !important;
}

/* Lien profil dans le header */
.header-ext-login .member-myprofile,
.member-myprofile {
  color: var(--txc-blue) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-right: 14px !important;
  text-decoration: none !important;
}

.header-ext-login .member-myprofile:hover {
  text-decoration: underline !important;
}

/* Bouton Déconnexion dans le header */
.header-ext-login .member-logout,
.member-logout {
  color: #ef4444 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1.5px solid rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
}

.header-ext-login .member-logout:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

/* Bouton Connexion quand déconnecté */
.header-ext-login .member-login,
.header-ext-login .btn.btn-primary,
.zone-header .btn-primary,
.header-ext-login .member-login.btn {
  background: linear-gradient(135deg, var(--txc-blue) 0%, #0070f3 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 14px rgba(0, 87, 217, 0.3) !important;
  text-decoration: none !important;
}

/* Réseaux sociaux */
.mod-social-links .social-link [class*="icon-"] {
  font-size: 22px !important;
  color: #475569 !important;
  transition: color 0.2s ease !important;
  vertical-align: middle !important;
}

.mod-social-links .social-link:hover [class*="icon-"] {
  color: var(--txc-blue) !important;
}

/* 3. BARRE DE MENU PRINCIPAL */
.line.site_line__item.line-menu,
.zone-menu,
.navbar.navbar-default {
  background: var(--txc-night-light) !important;
  border: none !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

.navbar-nav > li > a {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 16px 18px !important;
  transition: all 0.2s ease !important;
}

.navbar-nav > li > a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Onglet actif "Espace membres" */
.navbar-nav > li.active > a,
.navbar-nav > li[data-menu-id="85213"] > a {
  background: var(--txc-blue) !important;
  color: #ffffff !important;
}

/* 4. ZONE DE CONTENU PRINCIPALE (MAIN DASHBOARD) */
.line.site_line__item.line-main {
  background: transparent !important;
  padding: 40px 0 70px 0 !important;
}

/* Conteneurs et cartes blanches */
.zone-member,
.member-introduction-wrapper,
.member-login-wrapper,
.member-resetpassword-wrapper,
.form-withProgress__wrapper {
  background: var(--txc-card) !important;
  border: 1px solid var(--txc-border) !important;
  border-radius: var(--txc-radius) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
  padding: 36px !important;
}

/* Formulaires de connexion / mot de passe centré (style moderne façon carte) */
.member-login-wrapper,
.member-resetpassword-wrapper {
  max-width: 460px !important;
  margin: 50px auto !important;
  padding: 42px 36px !important;
  text-align: center !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03) !important;
}

.member-login-wrapper h1,
.member-resetpassword-wrapper h1 {
  text-align: center !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid #f1f5f9 !important;
}

.member-login-wrapper p,
.member-resetpassword-wrapper p {
  text-align: center !important;
  margin-bottom: 20px !important;
}

/* Annuler les colonnes Bootstrap qui réduisaient la largeur à 50% */
.member-login-wrapper .form-group,
.member-resetpassword-wrapper .form-group,
.member-login-wrapper .col-md-12,
.member-resetpassword-wrapper .col-md-12,
.member-resetpassword-wrapper .col-md-6 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  display: block !important;
}

.member-login-wrapper dl.zend_form,
.member-resetpassword-wrapper dl.zend_form {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Champs de saisie plein format dans la carte */
.member-login-wrapper .form-control,
.member-resetpassword-wrapper .form-control,
.member-login-wrapper input[type="email"],
.member-login-wrapper input[type="password"],
.member-login-wrapper input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 18px !important;
  font-size: 15px !important;
  margin-bottom: 14px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  text-align: left !important;
}

.member-login-wrapper .form-control:focus,
.member-resetpassword-wrapper .form-control:focus {
  background: #ffffff !important;
  border-color: var(--txc-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.15) !important;
}

/* Lien Mot de passe oublié centré */
.member-login-wrapper .reset-password,
.member-login-wrapper #reset_password,
.member-resetpassword-wrapper #login_link {
  display: block !important;
  text-align: center !important;
  margin: 16px auto !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--txc-blue) !important;
}

/* Bouton SE CONNECTER plein format centré */
.member-login-wrapper input[type="submit"],
.member-login-wrapper #submitform,
.member-login-wrapper .btn-primary,
.member-resetpassword-wrapper input[type="submit"],
.member-resetpassword-wrapper #submitform {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 20px auto 0 auto !important;
  padding: 13px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 87, 217, 0.3) !important;
}

/* 5. TITRES ET TYPOGRAPHIE (TAILLES AGRANDIES POUR PARFAITE LISIBILITÉ) */
h1,
.zone-member h1,
.member-login-wrapper h1,
.member-resetpassword-wrapper h1 {
  color: var(--txc-night) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid #f1f5f9 !important;
}

/* Suppression de l'affreux h2 rouge par défaut */
h2,
.zone-member h2 {
  color: var(--txc-night) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-top: 28px !important;
  margin-bottom: 18px !important;
}

h3,
.zone-member h3 {
  color: #1e293b !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-top: 20px !important;
  margin-bottom: 12px !important;
}

p,
.zone-member p {
  color: #475569 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* 6. SIDEBAR ESPACE MEMBRE ("MON ESPACE") */
.sidebar__member-zone,
.member-sidebar__inner {
  background: var(--txc-card) !important;
  border: 1px solid var(--txc-border) !important;
  border-radius: var(--txc-radius) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

/* En-tête "MON ESPACE" */
.member-sidebar__member-header {
  background: var(--txc-night) !important;
  border-bottom: 2px solid var(--txc-blue) !important;
  padding: 18px 22px !important;
}

.member-sidebar__member-header__title,
.member-sidebar__member-header h3 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
}

/* Liens du menu latéral */
.member-sidebar__menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
}

.member-sidebar__menu li {
  margin: 0 !important;
}

.member-sidebar__menu li a {
  display: block !important;
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 14px 22px !important;
  border-left: 4px solid transparent !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.member-sidebar__menu li a:hover {
  background: #f1f5f9 !important;
  color: var(--txc-blue) !important;
  border-left-color: var(--txc-blue) !important;
  padding-left: 26px !important;
}

/* Item actif du menu ("MON PROFIL", "MES ADHÉSIONS", etc.) */
.member-sidebar__menu li.active a,
.sidebar__member-zone li.active > a {
  background: #eff6ff !important;
  color: var(--txc-blue) !important;
  font-weight: 700 !important;
  border-left-color: var(--txc-blue) !important;
}

/* Pied du menu latéral (Déconnexion) */
.member-sidebar__member-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--txc-border) !important;
  padding: 14px 22px !important;
}

.member-sidebar__member-footer a {
  color: #ef4444 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  display: block !important;
  transition: color 0.15s ease !important;
}

.member-sidebar__member-footer a:hover {
  color: #dc2626 !important;
  text-decoration: underline !important;
}

/* 7. TABLEAUX ("MES ADHÉSIONS", "TRANSACTIONS", LICENCES) */
table,
.table,
.table-striped {
  width: 100% !important;
  background: #ffffff !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--txc-border) !important;
  margin: 24px 0 !important;
}

thead tr th,
.table-striped thead tr th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 18px !important;
  border-bottom: 2px solid var(--txc-border) !important;
  border-top: none !important;
}

tbody tr td,
.table-striped tbody > tr > td {
  padding: 14px 18px !important;
  color: #1e293b !important;
  font-size: 15px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top: none !important;
  vertical-align: middle !important;
}

.table-striped tbody > tr:nth-child(even) > td {
  background-color: #fbfcfe !important;
}

.table-striped tbody > tr:hover > td {
  background-color: #f1f5f9 !important;
}

/* 8. BOUTONS & FORMULAIRES */
.btn,
input[type="submit"],
button[type="submit"],
.btn-primary,
.btn-save {
  font-family: inherit !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 12px 26px !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-shadow: none !important;
  display: inline-block !important;
  text-decoration: none !important;
}

/* Boutons principaux ("SE CONNECTER", "ENREGISTRER", etc.) */
.btn-primary,
input[type="submit"]#submitform,
#membership-delegate-manage button.btn.btn-save {
  background: linear-gradient(135deg, var(--txc-blue) 0%, #0070f3 100%) !important;
  color: #ffffff !important;
  border: 1px solid var(--txc-blue) !important;
  box-shadow: 0 4px 14px rgba(0, 87, 217, 0.28) !important;
}

.btn-primary:hover,
input[type="submit"]#submitform:hover,
#membership-delegate-manage button.btn.btn-save:hover {
  background: linear-gradient(135deg, var(--txc-blue-hover) 0%, var(--txc-blue) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 87, 217, 0.38) !important;
  color: #ffffff !important;
}

/* Bouton "RENOUVELER MON ADHÉSION" */
.zone-member .btn:not(.btn-primary):not(.btn-link) {
  background: var(--txc-night) !important;
  color: #ffffff !important;
  border: 1px solid var(--txc-night) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 14px !important;
  padding: 12px 24px !important;
  box-shadow: 0 4px 12px rgba(6, 24, 39, 0.2) !important;
}

.zone-member .btn:not(.btn-primary):not(.btn-link):hover {
  background: var(--txc-blue) !important;
  border-color: var(--txc-blue) !important;
  color: #ffffff !important;
}

/* Liens "Mot de passe oublié" */
.reset-password,
#reset_password,
.btn-link,
.zone-member .btn-link {
  color: var(--txc-blue) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  margin-top: 10px !important;
  display: inline-block !important;
}

.reset-password:hover,
#reset_password:hover,
.btn-link:hover {
  color: var(--txc-blue-hover) !important;
  text-decoration: underline !important;
}

/* Libellés de formulaires ("Prénom", "Nom", "E-mail *", etc.) */
label,
.control-label {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
}

/* Champs de saisie (Inputs, Passwords, Emails, Téléphone) */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: var(--txc-text) !important;
  font-size: 15px !important;
  padding: 11px 16px !important;
  height: auto !important;
  min-height: 46px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus {
  border-color: var(--txc-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.15) !important;
  outline: none !important;
}

/* Photo adhérent */
.zone-member img {
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

/* 9. PIED DE PAGE (FOOTER) */
.line.site_line__item.line-footer,
.zone-footer {
  background: var(--txc-night) !important;
  color: #94a3b8 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 36px 0 24px 0 !important;
  text-align: center !important;
}

.line-footer h3 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 10px !important;
}

.line-footer p,
.line-footer a {
  font-size: 14px !important;
  color: var(--txc-cyan) !important;
  text-decoration: none !important;
}

.line-footer a:hover {
  text-decoration: underline !important;
}

.poweredBy-wrapper {
  background: #04101b !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.poweredBy-wrapper a,
.poweredBy-wrapper span {
  color: #64748b !important;
  font-size: 13px !important;
}

/* 10. PAGINATION & DIVERS */
.paginationControl {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-top: 20px !important;
}

.page {
  color: var(--txc-blue) !important;
}

/* 11. RESPONSIVE MOBILE (< 768px) */
@media (max-width: 767px) {
  .zone-member,
  .member-introduction-wrapper,
  .member-login-wrapper,
  .member-resetpassword-wrapper {
    padding: 24px 18px !important;
  }

  table,
  .table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .member-sidebar__inner {
    margin-bottom: 20px !important;
  }
}