/* ==========================================================================
   07-responsive.css - Ajustements mobile / tablette
   ========================================================================== */

/* ---- Pages activités ---- */
.tinderet-activity-page__header {
  padding: var(--t-space-3) 0;
  text-align: center;
}

.tinderet-activity-page__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--t-space-6);
}

.tinderet-activity-page__status {
  margin-top: var(--t-space-4);
}

.tinderet-activity-page__content {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--t-space-12) var(--t-gutter);
}

/* ---- Pages club ---- */
.tinderet-club-page__hero {
  background: linear-gradient(135deg, var(--t-text) 0%, var(--t-primary-dark) 100%);
  color: var(--t-white);
  padding: var(--t-space-20) 0;
}

.tinderet-club-page__hero-inner {
  display: flex;
  gap: var(--t-space-12);
  align-items: center;
}

.tinderet-club-page__logo {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255,255,255,0.2);
}

.tinderet-club-page__name {
  color: var(--t-white);
  margin-bottom: var(--t-space-3);
}

.tinderet-club-page__tagline {
  color: rgba(255,255,255,0.78);
  font-size: var(--t-font-size-lg);
}

/* ---- Page soutenir ---- */
.tinderet-support-page__hero {
  background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-dark) 100%);
  color: var(--t-white);
  text-align: center;
  padding: var(--t-space-20) var(--t-gutter);
}

.tinderet-support-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--t-space-6);
}

.tinderet-support-option {
  background: var(--t-white);
  border-radius: var(--t-radius-lg);
  padding: var(--t-space-8) var(--t-space-6);
  text-align: center;
  border: 2px solid var(--t-border);
  transition: border-color var(--t-transition-base), box-shadow var(--t-transition-base);
}

.tinderet-support-option:hover {
  border-color: var(--t-primary);
  box-shadow: var(--t-shadow-md);
}

.tinderet-support-option__icon {
  font-size: 2.5rem;
  margin-bottom: var(--t-space-4);
}

.tinderet-support-option__title {
  font-family: var(--t-font-heading);
  font-weight: 700;
  font-size: var(--t-font-size-lg);
  color: var(--t-text);
  margin-bottom: var(--t-space-3);
}

.tinderet-support-option__desc {
  font-size: var(--t-font-size-sm);
  color: var(--t-text-light);
}

/* ---- Footer ---- */
.tinderet-footer {
  background: linear-gradient(180deg, #006C93 0%, #004D6A 100%); /* bleu marque VDT */
  color: rgba(255,255,255,0.82);
  padding: var(--t-space-16) 0 0;
}

.tinderet-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--t-space-10);
  padding-bottom: var(--t-space-12);
}

.tinderet-footer__brand-name {
  font-family: var(--t-font-heading);
  font-size: var(--t-font-size-lg);
  font-weight: 800;
  color: var(--t-white);
}

.tinderet-footer__brand-tagline {
  font-size: var(--t-font-size-sm);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--t-space-6);
}

.tinderet-footer__col-title {
  font-family: var(--t-font-heading);
  font-size: var(--t-font-size-sm);
  font-weight: 700;
  color: var(--t-white);
  margin-bottom: var(--t-space-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tinderet-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tinderet-footer__links li {
  margin-bottom: var(--t-space-2);
}

.tinderet-footer__links a {
  color: rgba(255,255,255,0.65);
  font-size: var(--t-font-size-sm);
  text-decoration: none;
  transition: color var(--t-transition-fast);
}
.tinderet-footer__links a:hover {
  color: var(--t-white);
}

.tinderet-footer__contact-item {
  display: flex;
  gap: var(--t-space-2);
  font-size: var(--t-font-size-sm);
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--t-space-3);
}

.tinderet-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--t-space-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--t-space-4);
}

.tinderet-footer__bottom-text {
  font-size: var(--t-font-size-xs);
  color: rgba(255,255,255,0.4);
  margin: 0;
}

.tinderet-footer__legal {
  display: flex;
  gap: var(--t-space-5);
}

.tinderet-footer__legal a {
  font-size: var(--t-font-size-xs);
  color: rgba(255,255,255,0.4);
  text-decoration: none;
}
.tinderet-footer__legal a:hover {
  color: rgba(255,255,255,0.7);
}

/* ---- Responsive général ---- */
@media (max-width: 1024px) {
  .tinderet-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--t-space-8);
  }
}

@media (max-width: 768px) {
  /* Header mobile */
  .tinderet-hero__content {
    padding-top: var(--t-space-20);
    padding-bottom: var(--t-space-16);
  }

  /* Footer mobile */
  .tinderet-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--t-space-6);
  }

  .tinderet-footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Activités grid mobile */
  .tinderet-activities-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--t-space-3);
  }

  /* Club hero mobile */
  .tinderet-club-page__hero-inner {
    flex-direction: column;
    text-align: center;
  }

  /* Nav mobile : plein écran */
  .ast-mobile-menu-overlay { background: rgba(44, 51, 64, 0.95) !important; }
}

/* ---- Breadcrumb mobile ---- */

.tinderet-mobile-breadcrumb {
  display: none;
}

body.ast-header-break-point .ast-button-wrap {
  display: flex !important;
  align-items: center !important;
  gap: var(--t-space-3);
}

/* Breadcrumb placé dans l'espace blanc à droite du logo : prend la place
   restante de la rangée (order par défaut 0 = après le logo). */
body.ast-header-break-point .tinderet-mobile-breadcrumb {
  display: flex;
  flex: 1 1 auto;
  order: 0;
  align-items: center;
  gap: 0.3rem;
  overflow: hidden;
  min-width: 0;
  padding-left: var(--t-space-5);
  font-family: var(--t-font-heading);
  font-size: var(--t-font-size-xs);
  font-weight: 500;
}

body.ast-header-break-point .tinderet-mobile-breadcrumb .tmb__item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--t-text-light);
  text-decoration: none;
}

body.ast-header-break-point .tinderet-mobile-breadcrumb .tmb__item--current {
  color: var(--t-text);
  font-weight: 600;
}

body.ast-header-break-point .tinderet-mobile-breadcrumb .tmb__sep {
  color: var(--t-text-muted);
  flex-shrink: 0;
}

/* Masqué quand le menu plein-écran est ouvert */
body.ast-header-break-point.ast-main-header-nav-open .tinderet-mobile-breadcrumb {
  display: none;
}

/* ---- Navigation burger (body.ast-header-break-point) ---- */

/* Items s'empilent verticalement */
.ast-header-break-point .main-header-menu {
  flex-direction: column !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

/* Liens : espacement vertical confortable, sans forçage nowrap du desktop */
.ast-header-break-point .main-navigation ul .menu-item .menu-link {
  white-space: normal !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Masquer les flèches chevron (sous-menus toujours ouverts) */
.ast-header-break-point .ast-menu-toggle {
  display: none !important;
}

/* Sous-menus toujours visibles quand la navigation est ouverte */
.ast-header-break-point.ast-main-header-nav-open .main-header-bar-navigation .sub-menu {
  display: block !important;
}

/* Le #masthead porte will-change:transform (header sticky masqué au scroll),
   ce qui crée un bloc conteneur : sans cette neutralisation, l'overlay
   position:fixed ci-dessous se positionne par rapport au header (80px) au lieu
   du viewport et n'affiche que le premier item du menu. Quand le menu mobile
   est ouvert, le header n'est jamais masqué : on peut retirer le contexte. */
.ast-header-break-point.ast-main-header-nav-open #masthead {
  will-change: auto !important;
  transform: none !important;
}

/* Fond blanc plein écran couvrant le contenu de la page */
.ast-header-break-point.ast-main-header-nav-open .main-header-bar-navigation {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #fff !important;
  z-index: 3 !important; /* en dessous de .main-header-bar qui est à z-index: 4 */
  overflow-y: auto !important;
  padding: 4.5rem var(--t-gutter) 3rem !important;
  box-sizing: border-box !important;
}

/* ---- Navigation mobile (popup HFB : .ast-builder-menu-mobile) ---- */

/* Flèches / chevrons de sous-menu masqués (uniquement dans le menu mobile :
   sans le scope, cette règle masquait aussi la flèche du bouton retour-en-haut
   #ast-scroll-top, qui utilise la même classe .ast-arrow-svg). */
.ast-builder-menu-mobile .ast-arrow-svg {
  display: none !important;
}

/* Fond sombre (var(--t-text)) sur TOUT le panneau du menu mobile :
   conteneur du popup, menu principal, liens et sous-menus. */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-header-content,
.ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu {
  background-color: var(--t-text) !important;
  background-image: none !important;
}

/* Tous les liens (premier niveau + sous-menus) : texte blanc majuscule */
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link {
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}

/* Sous-menus : intégrés au flux, légère indentation */
.ast-builder-menu-mobile .sub-menu,
.ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu {
  position: static !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  padding: var(--t-space-2) 0 !important;
}

.ast-builder-menu-mobile .sub-menu .menu-link {
  padding-left: var(--t-space-8) !important;
}

/* Survol : cyan, sans changement de fond (comme le desktop) */
.ast-builder-menu-mobile .main-navigation .menu-link:hover,
.ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item:hover > .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu .menu-link:hover,
.ast-builder-menu-mobile .main-navigation .main-header-menu .current-menu-item > .menu-link {
  color: var(--t-primary) !important;
  background-color: transparent !important;
}

/* Bouton de fermeture lisible sur le fond sombre */
.ast-mobile-popup-drawer.active .menu-toggle-close {
  color: #fff !important;
}

/* ---- En-tête mobile : cadre brun à gauche (burger), reste blanc ---- */

/* La rangée passe en flex ; cellules en pleine hauteur pour le cadre brun */
.ast-mobile-header-wrap .ast-builder-grid-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Cellule du burger : à gauche, fond brun pleine hauteur, burger centré.
   Le margin/padding négatif fait déborder le brun jusqu'au bord gauche. */
.ast-mobile-header-wrap .site-header-primary-section-right {
  order: -1 !important;
  flex: 0 0 auto !important;
  /* margin-left négatif : déborde jusqu'au bord gauche ;
     margin-right négatif : annule le créneau réservé par le flex pour que
     le bloc cyan vienne coller au cadre brun (sinon gap blanc de 20px). */
  margin: 0 -20px 0 -20px !important;
  padding: 0 var(--t-space-8) 0 var(--t-space-12) !important;
  background-color: var(--t-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Le conteneur du bouton remplit la cellule et centre le burger */
.ast-mobile-header-wrap .site-header-primary-section-right .ast-builder-layout-element,
.ast-mobile-header-wrap .site-header-primary-section-right .ast-button-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Logo + reste de la barre : on garde le fond par défaut (blanc / cyan du logo).
   align-items:stretch pour que le bloc cyan occupe 100% de la hauteur. */
.ast-mobile-header-wrap .site-header-primary-section-left {
  order: 0 !important;
  flex: 0 1 auto !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Bloc cyan du logo : pleine hauteur de la barre mobile */
.ast-mobile-header-wrap [data-section="title_tagline"] {
  height: 100% !important;
  align-self: stretch !important;
  margin-right: 0 !important;
}

/* Burger : pas de boîte propre, simple icône blanche centrée sur le brun */
.ast-mobile-header-wrap .main-header-menu-toggle {
  background-color: transparent !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.ast-mobile-header-wrap .main-header-menu-toggle .mobile-menu-toggle-icon,
.ast-mobile-header-wrap .main-header-menu-toggle svg {
  color: #fff !important;
  fill: currentColor !important;
}

@media (max-width: 480px) {
  .tinderet-cta {
    padding: var(--t-space-12) var(--t-space-5);
    border-radius: var(--t-radius-lg);
  }

  .tinderet-activities-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Print ---- */
@media print {
  .tinderet-hero, .tinderet-map, .tinderet-footer { display: none; }
  body { font-size: 12pt; }
  a { color: inherit; text-decoration: underline; }
}