/* =========================================
   TEMPLATE HUB — template.css (COMPLET)
========================================= */

body.template-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
}

body.template-page .template-main{
  flex: 1;
  padding-bottom: 5rem; /* garde le dernier bloc bien au-dessus du footer */
}

/* =========================
   INTRO
========================= */

.section-intro{
  max-width: 900px;
  margin: 4rem auto 3rem;
  padding: 2.4rem 2rem;
  text-align: center;
}

.section-intro.gradient-box-triple-inverse{
  border-radius: 0 !important;
}

.section-intro h2{
  margin: 0 0 1rem;
}

.section-intro p{
  margin: 0;
}

/* espace entre paragraphes uniquement quand il y en a plusieurs */
.section-intro p + p{
  margin-top: 1rem;
}

/* bouton CTA quand il est dans un bloc section-intro */
.section-intro .hub-btn{
  margin-top: 1.2rem;
}

/* force la couleur dans les blocs gradient-box-triple-inverse */
.gradient-box-triple-inverse,
.gradient-box-triple-inverse *{
  color: var(--text-light);
}

/* =========================
   FILTRES
========================= */

.template-filters{
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  margin: 2.25rem auto 1.25rem;
  padding: 0 20px;
}

/* liens filtres */

.template-filters a{
  background: none;
  border: none;
  padding: .35rem .25rem;

  font: inherit;
  font-weight: 600;

  color: #1a1a1a;
  text-decoration: none;

  cursor: pointer;

  transition: color .2s ease;
}

.template-filters a:hover{
  color: var(--link-hover);
}

.template-filters a.active{
  color: var(--link-hover);
}

.template-filters a.active::before{
  content: "✦";
  margin-right: .5rem;
  color: var(--link-hover);
}


/* =========================
   LISTE (REASSURANCE)
========================= */

.section-intro .template-list{
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  text-align: left;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section-intro .template-list li{
  margin: .65rem 0;
  line-height: 1.6;
  position: relative;
  padding-left: 1.2rem;
}

.section-intro .template-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
}

/* =========================
   SECTION DÉGRADÉ ANIMÉE (HUB)
========================= */

.template-section{
  padding: 4rem 1rem;
  margin-bottom: 6rem;
}

.gradient-template-animated{
  background: linear-gradient(
    120deg,
    rgba(34, 58, 88, 1),
    rgba(70, 110, 155, 1),
    rgba(34, 58, 88, 1)
  );
  background-size: 220% 220%;
  animation: bpwGradientMove 14s ease-in-out infinite;
}

@keyframes bpwGradientMove{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .gradient-template-animated{ animation: none; }
}

/* =========================
   PLATEAU BLANC (HUB)
========================= */

.template-inner{
  max-width: 1320px;
  margin: 0 auto;
  background: #fff;
  padding: 26px 20px;
}

/* =========================
   HUB GRID
========================= */

.template-hub-graphic{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* =========================
   CARD
========================= */

.hub-card{
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.hub-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,.15);
}

.hub-top{
  background: rgba(44, 62, 80, 1);
  color: #fff;
  text-align: center;
  padding: 18px 14px;
  font-weight: 700;
  font-size: 1.05rem;
}

.hub-media{
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.hub-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease;
}

.hub-card:hover .hub-media img{
  transform: scale(1.06);
}

.hub-bottom{
  background: rgba(44, 62, 80, 1);
  padding: 16px 14px;
  text-align: center;
}

.hub-btn{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 4px;
  background: var(--cta);
  color: var(--cta-text);
  font-weight: 700;
  transition: background-color .2s ease;
  text-decoration: none;
  transform: none;
}

.hub-card:hover .hub-btn{
  background: var(--cta-hover);
  transform: none;
}

.hub-btn:hover{
  transform: none;
}

.hub-card:focus-visible{
  outline: 2px solid var(--cta);
  outline-offset: 4px;
}

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

@media (max-width: 900px){
  .template-hub-graphic{
    grid-template-columns: 1fr;
  }

  .template-inner{
    padding: 22px 16px;
  }
}

/* =========================================
   TEMPLATE — BLOC AVANTAGES
========================================= */

#template-prestation{
  padding: 0 20px 80px;
  margin-top: 5.5rem;
}

.template-prestation-wrap{
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
  box-sizing: border-box;
}

/* grille */
.template-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

/* items */
.template-item{
  padding: 20px;
}

/* icônes */
.template-icon{
  font-size: 2.6rem;
  margin-bottom: 12px;
  color: var(--text-light);
  transition: transform .2s ease, color .2s ease;
}

.template-item:hover .template-icon{
  color: var(--cta);
  transform: scale(1.1);
}

/* titres */
.template-title{
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: var(--text-light);
}

/* texte */
.template-text{
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* force la couleur dans tout le bloc */
.template-prestation-wrap,
.template-prestation-wrap *{
  color: var(--text-light);
}

/* =========================
   RESPONSIVE AVANTAGES
========================= */

@media (max-width: 1024px){
  .template-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-grid .template-item:nth-child(3){
    grid-column: 1 / -1;
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 640px){
  .template-grid{
    grid-template-columns: 1fr;
  }

  .template-grid .template-item:nth-child(3){
    grid-column: auto;
    max-width: none;
  }
}

/* =========================
   BREADCRUMB — ALIGNEMENT PROPRE
========================= */

.breadcrumb{
  width: 100%;
  max-width: 1320px;
  margin: 1.25rem auto 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: left !important;
}

.breadcrumb-list{
  display: flex;
  justify-content: flex-start !important;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;

  list-style: none;
  margin: 0;
  padding: 0;

  text-align: left !important;
}

.breadcrumb-item{
  display: inline-flex;
  align-items: center;
}

.breadcrumb-item:not(:last-child)::after{
  content: "›";
  margin-left: .5rem;
  opacity: .6;
}

.breadcrumb-link{
  text-decoration: none;
  color: inherit;
  opacity: .85;
}

.breadcrumb-link:hover{
  text-decoration: underline;
  opacity: 1;
}

.breadcrumb-current{
  opacity: .85;
}

/* réduit l'espace au-dessus du H1 sur cette page */
body.template-page .page-title{
  margin-top: 2rem;
}

/* =========================
   ÉTAT VIDE (aucun template)
========================= */

.template-empty{
  text-align: center;
  padding: 2rem 1rem;
  margin: 0;
  color: var(--bg-white);
  font-weight: 500;
}

/* =========================
   PAGINATION (module templates)
========================= */

.template-pagination{
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 2.5rem auto 0;
  padding: 0 20px;
}

.template-pagination a,
.template-pagination span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .75rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
}

.template-pagination a{
  background: rgba(255,255,255,0.9);
  color: #1a1a1a;
}

.template-pagination a:hover{
  background: var(--bg-white);
  color: var(--link-hover);
}

.template-pagination .is-active{
  background: var(--cta);
  color: var(--cta-text);
}

.template-pagination .is-disabled{
  opacity: .5;
  pointer-events: none;
}

.template-detail-card{
  max-width: 760px;
  margin: 0 auto;
}

.template-detail-page .template-detail-card{
  margin-top: 80px;
}

/* =========================
   BOUTON
========================= */

.btn-template{
  display: inline-block;
  padding: 6px 14px;
  background-color: var(--cta);
  color: var(--cta-text);
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  transition: background-color 0.3s ease;
  transform: none;
}

.btn-template:hover{
  background-color: var(--cta-hover);
  transform: none;
}

.btn-template-secondary{
  text-decoration: none;
  transform: none;
}

.btn-template-secondary:hover{
  transform: none;
}

/* =========================
   BADGE PRIX — TEMPLATES
   Affiche le prix du template
   en haut à droite du mockup
   (cartes, flyers, réseau)
========================= */

.template-wrapper{
  position: relative;
}

/* =========================
   BADGE PRIX — STYLE PREMIUM
   effet glass / Apple
========================= */

.template-price-badge{
  position: absolute;
  top: 14px;
  right: 14px;

  padding: 6px 12px;

  font-size: 0.85rem;
  font-weight: 600;

  color: #1a1a1a;

  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border-radius: 20px;

  box-shadow:
    0 6px 14px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.6);

  z-index: 2;
}

/* =========================
   BADGE PRIX — ANIMATION
========================= */

.template-price-badge{
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* effet au survol de la carte */

.template-wrapper:hover .template-price-badge,
.template-flyer-wrapper:hover .template-price-badge,
.template-reseau-wrapper:hover .template-price-badge{

  transform: translateY(-3px) scale(1.05);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* =========================
   ZOOM IMAGE AU HOVER
========================= */

.template-wrapper img,
.template-flyer-wrapper img,
.template-reseau-wrapper img{
  transition: transform 0.35s ease;
}

.template-wrapper:hover img,
.template-flyer-wrapper:hover img,
.template-reseau-wrapper:hover img{
  transform: scale(1.04);
}

/* Empêche le zoom de sortir du cadre */
.template-wrapper,
.template-flyer-wrapper,
.template-reseau-wrapper{
  overflow: hidden;
}


/* =========================
   BLOC LIENS ENTRE COLLECTIONS
========================= */

.template-related-links{
  max-width: 1100px;
  margin: 3rem auto 0;
  padding: 0 2rem 4rem;
  text-align: center;
}

.template-related-links h2{
  margin: 0 0 1rem;
  color: var(--text-main);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

.template-related-links p{
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.8;
}

.template-related-links a{
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.template-related-links a:hover{
  text-decoration: underline;
}

.template-related-links span{
  color: var(--text-main);
  margin: 0 0.35rem;
}

/* =========================
   BLOC DECOUVRIR AUSSI
========================= */

.section-intro a{
  color: var(--footer-link-color);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.3s ease;
}

.section-intro a:hover,
.section-intro a:focus{
  color: var(--footer-link-hover);
}

/* =========================
   FAQ TEMPLATES
========================= */

.template-faq-section{
  margin-bottom: 5rem;
}

.template-faq{
  margin-top: 2rem;
  text-align: left;
}

/* Ligne séparation */

.faq-item{
  border-top: 1px solid rgba(255,255,255,0.18);
}

.faq-item:last-child{
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

/* Question */

.faq-question{
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-light);
  font: inherit;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.5;
  text-align: left;
  padding: 1.2rem 0;
  cursor: pointer;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-question:hover{
  color: var(--gray-soft);
}

/* Icône */

.faq-icon{
  flex: 0 0 auto;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.25s ease;
}

.faq-item.active .faq-icon{
  transform: rotate(45deg);
}

/* Réponse */

.faq-answer{
  max-height: 0;
  overflow: hidden;
  opacity: 0;

  transition:
    max-height 0.35s ease,
    opacity 0.25s ease;

  padding: 0;
}

.faq-item.active .faq-answer{
  max-height: 220px;
  opacity: 1;
  padding: 0 0 1.2rem;
}

.faq-answer p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-light);
  opacity: 0.95;
}

/* =========================
   PAGE MERCI
========================= */

.template-thankyou-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.template-thankyou-page .template-detail-page{
  flex: 1;
}

.template-thankyou-card{
  max-width: 760px;
  margin: 0 auto;
}

.template-thankyou-actions{
  margin-top: 30px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.template-thankyou-note{
  margin-top: 20px;
}

/* =========================
   PAGE ERREUR TÉLÉCHARGEMENT
========================= */

.template-download-error-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.template-download-error-page .template-detail-page{
  flex: 1;
}

/* message page téléchargement */

.template-message-card{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.template-message-card h1{
  margin-bottom: 20px;
}

.template-message-actions{
  margin-top: 30px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}