/**
 * TEMPLATE PAGES HUB - SERVICES & OFFRES AVEC IMAGES
 * Structure modulaire réutilisable + images background + ALIGNEMENT SOUS-TITRE NORMAL
 */

/* ================================
   HUB SECTION PRINCIPALE
   ================================ */

.hub-section {
  background: var(--neutral-bg);
  padding: var(--spacing-xxxl) var(--spacing-xl);
  min-height: 80vh;
}

.hub-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* TITRE PRINCIPAL HUB */
.hub-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-black);
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.02em;
  
  /* ANIMATION ENTRÉE */
  opacity: 0;
  transform: translateY(30px);
  animation: hubTitleEntrance 1s ease-out 0.2s forwards;
}

@keyframes hubTitleEntrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hub-subtitle {
  font-size: var(--text-xl);
  color: var(--neutral-light);
  margin-bottom: var(--spacing-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  
  /* ALIGNEMENT NORMAL AU LIEU DE CENTRÉ */
  text-align: left; /* CHANGÉ DE center À left */
  
  /* ANIMATION ENTRÉE DELAYED */
  opacity: 0;
  transform: translateY(30px);
  animation: hubTitleEntrance 1s ease-out 0.4s forwards;
}

/*
 * TEMPLATE PAGES HUB - SERVICES & OFFRES AVEC IMAGES
 * Structure modulaire réutilisable + images background + ALIGNEMENT SOUS-TITRE NORMAL
 */

/* ================================
   HUB SECTION PRINCIPALE
   ================================ */

.hub-section {
  background: var(--neutral-bg);
  padding: var(--spacing-xxxl) var(--spacing-xl);
  min-height: 80vh;
}

.hub-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* TITRE PRINCIPAL HUB */
.hub-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-black);
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.02em;
  
  /* ANIMATION ENTRÉE */
  opacity: 0;
  transform: translateY(30px);
  animation: hubTitleEntrance 1s ease-out 0.2s forwards;
}

@keyframes hubTitleEntrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hub-subtitle {
  font-size: var(--text-xl);
  color: var(--neutral-light);
  margin-bottom: var(--spacing-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  
  /* ALIGNEMENT NORMAL AU LIEU DE CENTRÉ */
  text-align: left; /* CHANGÉ DE center À left */
  
  /* ANIMATION ENTRÉE DELAYED */
  opacity: 0;
  transform: translateY(30px);
  animation: hubTitleEntrance 1s ease-out 0.4s forwards;
}

/* ================================
   GRILLE CARDS HUB
   ================================ */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-xl);
  margin: var(--spacing-xxxl) 0;
}

/* ================================
   CARD HUB PREMIUM AVEC IMAGES BACKGROUND - FLEX COHÉRENT
   ================================ */

.hub-card {
  background: var(--neutral-white);
  border-radius: var(--radius-xl);
  padding: 0;
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  height: 400px;
  
  /* IMAGE BACKGROUND AVEC FILTRES ASSOMBRIS RENFORCÉS */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* OMBRES PREMIUM */
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.06),
    0 3px 10px rgba(0, 0, 0, 0.04);
  
  /* ANIMATION ENTRÉE STAGGERED */
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  animation: hubCardEntrance 1s ease-out forwards;
}

.hub-card:nth-child(1) { animation-delay: 0.8s; }
.hub-card:nth-child(2) { animation-delay: 1s; }
.hub-card:nth-child(3) { animation-delay: 1.2s; }

@keyframes hubCardEntrance {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ================================
   MAPPING IMAGES SERVICES & OFFRES - CHEMINS ABSOLUS DEPUIS RACINE CORRIGÉS ✅
   ================================ */

/* MAPPING IMAGES SERVICES */
.hub-card[href*="carrosserie-peinture"] {
  background-image: url('/img/peinture-carrosserie-talange.png');
}

.hub-card[href*="debosselage-sans-peinture"] {
  background-image: url('/img/debosselage-sans-peinture-talange.png');
}

.hub-card[href*="jantes"] {
  background-image: url('/img/renovation-jantes-voiture-talange.png');
}

/* MAPPING IMAGES OFFRES */
.hub-card[href*="franchise-offerte"] {
  background-image: url('/img/carrosserie-franchise-offerte-talange.png');
}

.hub-card[href*="bon-d-achat"] {
  background-image: url('/img/bon-achat-reparation-carrosserie-talange.png');
}

.hub-card[href*="parrainage"] {
  background-image: url('/img/parrainage-carrosserie-50-euros-talange.png');
}

/* ================================
   OVERLAY ET CONTENU - FLEX COHÉRENT
   ================================ */

/* OVERLAY SOMBRE RENFORCÉ POUR LISIBILITÉ MAXIMALE */
.hub-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 1;
}

/* CONTENU CARD AU-DESSUS DE L'OVERLAY */
.hub-card > * {
  position: relative;
  z-index: 2;
}

/* CONTAINER CONTENU CENTRÉ - LAYOUT VERTICAL CORRECT */
.hub-card-content {
  position: absolute;
  top: var(--spacing-xl);
  bottom: var(--spacing-xl);
  left: var(--spacing-lg);
  right: var(--spacing-lg);
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/* ================================
   STYLES TEXTE SUR OVERLAY - FLEX COHÉRENT
   ================================ */

/* TITRE CARD AVEC CONTRASTE MAXIMAL */
.hub-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-white);
  margin: 0;
  text-shadow: 
    0 4px 16px rgba(0, 0, 0, 1),
    0 3px 12px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 1px 4px rgba(0, 0, 0, 0.7);
  line-height: 1.1;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  
  /* BACKGROUND SEMI-TRANSPARENT */
  background: rgba(0, 0, 0, 0.4);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* EURO SYMBOL COHÉRENT AVEC DESIGN */
.hub-card-title .fa-euro-sign {
  color: var(--neutral-white);
  margin-left: var(--spacing-xs);
  font-size: 0.9em;
  text-shadow: inherit;
}

/* DESCRIPTION CARD AVEC FLEX IDENTIQUE AU TITRE */
.hub-card-description {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.98);
  margin: var(--spacing-lg) 0;
  text-shadow: 
    0 3px 12px rgba(0, 0, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.9),
    0 1px 4px rgba(0, 0, 0, 0.8);
  font-weight: var(--weight-medium);
  
  /* MÊME COMPORTEMENT QUE LE TITRE */
  flex-shrink: 0;
  text-align: center;
  
  /* BACKGROUND IDENTIQUE AU TITRE */
  background: rgba(0, 0, 0, 0.4);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* CTA CARD PREMIUM - LISIBILITÉ RENFORCÉE */
.hub-card-cta {
  background: var(--primary-color);
  color: var(--neutral-white);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  border: 2px solid var(--primary-color);
  box-shadow: 
    0 6px 20px rgba(237, 31, 36, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  flex-shrink: 0;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 1px 4px rgba(0, 0, 0, 0.6);
}

.hub-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(237, 31, 36, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.3);
}

.hub-card-cta i {
  font-size: var(--text-sm);
}

/* ================================
   ACTIONS HUB
   ================================ */

.hub-actions {
  margin-top: var(--spacing-xxxl);
  padding: var(--spacing-xxxl);
  background: rgba(237, 31, 36, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-xl);
  border: 2px solid rgba(237, 31, 36, 0.1);
  
  /* ANIMATION ENTRÉE */
  opacity: 0;
  transform: translateY(30px);
  animation: hubTitleEntrance 1s ease-out 1.8s forwards;
}

.actions-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-black);
  margin-bottom: var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.actions-title i {
  color: var(--primary-color);
  font-size: var(--text-xl);
}

.actions-buttons {
  display: flex;
  gap: var(--spacing-xl);
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================
   RESPONSIVE HUB
   ================================ */

@media (max-width: 768px) {
  .hub-section {
    padding: var(--spacing-xl) var(--spacing-md);
  }
  
  .hub-title {
    font-size: var(--text-3xl);
  }
  
  .hub-subtitle {
    font-size: var(--text-lg);
    text-align: left; /* MAINTIEN ALIGNEMENT GAUCHE EN MOBILE */
  }
  
  .hub-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
  }
  
  .hub-card {
    height: 350px;
  }
  
  .hub-card-content {
    top: var(--spacing-md);
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    right: var(--spacing-md);
  }
  
  .hub-card-title {
    font-size: var(--text-xl);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .hub-card-description {
    font-size: var(--text-base);
    margin: var(--spacing-md) 0;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .hub-actions {
    padding: var(--spacing-xl);
  }
  
  .actions-buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  .hub-section {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
  
  .hub-title {
    font-size: var(--text-2xl);
  }
  
  .hub-card {
    height: 300px;
  }
  
  .hub-card-content {
    top: var(--spacing-sm);
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    right: var(--spacing-sm);
  }
  
  .hub-card-title {
    font-size: var(--text-lg);
    padding: var(--spacing-xs);
  }
  
  .hub-card-description {
    font-size: var(--text-sm);
    line-height: 1.4;
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-xs);
  }
  
  .hub-card-cta {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
  }
  
  .hub-actions {
    padding: var(--spacing-lg);
  }
}

/* ================================
   CARD HUB PREMIUM AVEC IMAGES BACKGROUND - FLEX COHÉRENT
   ================================ */

.hub-card {
  background: var(--neutral-white);
  border-radius: var(--radius-xl);
  padding: 0;
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  height: 400px;
  
  /* IMAGE BACKGROUND AVEC FILTRES ASSOMBRIS RENFORCÉS */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* OMBRES PREMIUM */
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.06),
    0 3px 10px rgba(0, 0, 0, 0.04);
  
  /* ANIMATION ENTRÉE STAGGERED */
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  animation: hubCardEntrance 1s ease-out forwards;
}

.hub-card:nth-child(1) { animation-delay: 0.8s; }
.hub-card:nth-child(2) { animation-delay: 1s; }
.hub-card:nth-child(3) { animation-delay: 1.2s; }

@keyframes hubCardEntrance {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ================================
   MAPPING IMAGES SERVICES & OFFRES - CHEMINS ABSOLUS DEPUIS RACINE CORRIGÉS ✅
   ================================ */

/* MAPPING IMAGES SERVICES */
.hub-card[href*="carrosserie-peinture"] {
  background-image: url('/img/peinture-carrosserie-talange.png');
}

.hub-card[href*="debosselage-sans-peinture"] {
  background-image: url('/img/debosselage-sans-peinture-talange.png');
}

.hub-card[href*="jantes"] {
  background-image: url('/img/renovation-jantes-voiture-talange.png');
}

/* MAPPING IMAGES OFFRES */
.hub-card[href*="franchise-offerte"] {
  background-image: url('/img/carrosserie-franchise-offerte-talange.png');
}

.hub-card[href*="bon-d-achat"] {
  background-image: url('/img/bon-achat-reparation-carrosserie-talange.png');
}

.hub-card[href*="parrainage"] {
  background-image: url('/img/parrainage-carrosserie-50-euros-talange.png');
}

/* ================================
   OVERLAY ET CONTENU - FLEX COHÉRENT
   ================================ */

/* OVERLAY SOMBRE RENFORCÉ POUR LISIBILITÉ MAXIMALE */
.hub-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 1;
}

/* CONTENU CARD AU-DESSUS DE L'OVERLAY */
.hub-card > * {
  position: relative;
  z-index: 2;
}

/* CONTAINER CONTENU CENTRÉ - LAYOUT VERTICAL CORRECT */
.hub-card-content {
  position: absolute;
  top: var(--spacing-xl);
  bottom: var(--spacing-xl);
  left: var(--spacing-lg);
  right: var(--spacing-lg);
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/* ================================
   STYLES TEXTE SUR OVERLAY - FLEX COHÉRENT
   ================================ */

/* TITRE CARD AVEC CONTRASTE MAXIMAL */
.hub-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-white);
  margin: 0;
  text-shadow: 
    0 4px 16px rgba(0, 0, 0, 1),
    0 3px 12px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 1px 4px rgba(0, 0, 0, 0.7);
  line-height: 1.1;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  
  /* BACKGROUND SEMI-TRANSPARENT */
  background: rgba(0, 0, 0, 0.4);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* EURO SYMBOL COHÉRENT AVEC DESIGN */
.hub-card-title .fa-euro-sign {
  color: var(--neutral-white);
  margin-left: var(--spacing-xs);
  font-size: 0.9em;
  text-shadow: inherit;
}

/* DESCRIPTION CARD AVEC FLEX IDENTIQUE AU TITRE */
.hub-card-description {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.98);
  margin: var(--spacing-lg) 0;
  text-shadow: 
    0 3px 12px rgba(0, 0, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.9),
    0 1px 4px rgba(0, 0, 0, 0.8);
  font-weight: var(--weight-medium);
  
  /* MÊME COMPORTEMENT QUE LE TITRE */
  flex-shrink: 0;
  text-align: center;
  
  /* BACKGROUND IDENTIQUE AU TITRE */
  background: rgba(0, 0, 0, 0.4);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* CTA CARD PREMIUM - LISIBILITÉ RENFORCÉE */
.hub-card-cta {
  background: var(--primary-color);
  color: var(--neutral-white);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  border: 2px solid var(--primary-color);
  box-shadow: 
    0 6px 20px rgba(237, 31, 36, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  flex-shrink: 0;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 1px 4px rgba(0, 0, 0, 0.6);
}

.hub-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(237, 31, 36, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.3);
}

.hub-card-cta i {
  font-size: var(--text-sm);
}

/* ================================
   ACTIONS HUB
   ================================ */

.hub-actions {
  margin-top: var(--spacing-xxxl);
  padding: var(--spacing-xxxl);
  background: rgba(237, 31, 36, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-xl);
  border: 2px solid rgba(237, 31, 36, 0.1);
  
  /* ANIMATION ENTRÉE */
  opacity: 0;
  transform: translateY(30px);
  animation: hubTitleEntrance 1s ease-out 1.8s forwards;
}

.actions-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-black);
  margin-bottom: var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.actions-title i {
  color: var(--primary-color);
  font-size: var(--text-xl);
}

.actions-buttons {
  display: flex;
  gap: var(--spacing-xl);
  justify-content: center;
  flex-wrap: wrap;
}

/* ================================
   RESPONSIVE HUB
   ================================ */

@media (max-width: 768px) {
  .hub-section {
    padding: var(--spacing-xl) var(--spacing-md);
  }
  
  .hub-title {
    font-size: var(--text-3xl);
  }
  
  .hub-subtitle {
    font-size: var(--text-lg);
    text-align: left; /* MAINTIEN ALIGNEMENT GAUCHE EN MOBILE */
  }
  
  .hub-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
  }
  
  .hub-card {
    height: 350px;
  }
  
  .hub-card-content {
    top: var(--spacing-md);
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    right: var(--spacing-md);
  }
  
  .hub-card-title {
    font-size: var(--text-xl);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .hub-card-description {
    font-size: var(--text-base);
    margin: var(--spacing-md) 0;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .hub-actions {
    padding: var(--spacing-xl);
  }
  
  .actions-buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  .hub-section {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
  
  .hub-title {
    font-size: var(--text-2xl);
  }
  
  .hub-card {
    height: 300px;
  }
  
  .hub-card-content {
    top: var(--spacing-sm);
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    right: var(--spacing-sm);
  }
  
  .hub-card-title {
    font-size: var(--text-lg);
    padding: var(--spacing-xs);
  }
  
  .hub-card-description {
    font-size: var(--text-sm);
    line-height: 1.4;
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-xs);
  }
  
  .hub-card-cta {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
  }
  
  .hub-actions {
    padding: var(--spacing-lg);
  }
}