/* =========================
   Sales Page v2 (COMMON CSS)
   Scope: body.gtla-sales-v2 + main.gtla-sales-page-v2
   Version: 2.1.0
   ========================= */

body.gtla-sales-v2 {
  padding: 0;
  margin: 0;
}

/* Ajustements builder/thème, uniquement sur ces pages */
body.gtla-sales-v2 div.container {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
}

body.gtla-sales-v2 h1.main_title { display: none; }
body.gtla-sales-v2 span#tve_leads_end_content { display: none !important; }

/* ========================================
   FORCER les marges réduites (ULTRA SPÉCIFIQUE pour écraser Divi)
   ======================================== */

/* Paragraphes - triple spécificité */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p,
body.gtla-sales-v2 main.gtla-sales-page-v2 div.paragraph p {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Listes ul/ol - écraser le padding de Divi */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ul,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ol,
body.gtla-sales-v2 main.gtla-sales-page-v2 div.paragraph ul,
body.gtla-sales-v2 main.gtla-sales-page-v2 div.paragraph ol {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Items de liste */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph li,
body.gtla-sales-v2 main.gtla-sales-page-v2 div.paragraph li {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Variables par défaut (surchargées via gtla_sales_vars) */
body.gtla-sales-v2 main.gtla-sales-page-v2 {
  --gtla-bg-dark: #474747;
  --gtla-bg-light: #f8f8f8;
  --gtla-accent: #7a98e0;
  --gtla-cta: #e04d45;

  --gtla-text-dark: #474747;
  --gtla-text-light: white;

  --gtla-pad-desktop: 18%;
  --gtla-pad-mobile: 5%;

  --gtla-font-base: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  --gtla-font-cta: 'Lato', Helvetica, Arial, Lucida, sans-serif;
}

/* IMPORTANT : ton contenu doit être englobé dans <div class="page"> ... */
body.gtla-sales-v2 main.gtla-sales-page-v2 .page {
  display: flex;
  flex-direction: column;
  font-family: var(--gtla-font-base);
}

/* =========================
   TITLE SECTION
   ========================= */

body.gtla-sales-v2 main.gtla-sales-page-v2 .title {
  background: var(--gtla-bg-dark);
  padding-left: var(--gtla-pad-desktop);
  padding-right: var(--gtla-pad-desktop);
  text-align: center;
  text-shadow: rgba(0,0,0,.4) 0px 4.5px 0px;
}

@media (max-width: 480px) {
  body.gtla-sales-v2 main.gtla-sales-page-v2 .title {
    padding-left: var(--gtla-pad-mobile);
    padding-right: var(--gtla-pad-mobile);
  }
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .title h1 {
  color: var(--gtla-accent) !important;
  font-weight: 700;
  font-size: 56px;
  text-transform: uppercase;
  margin: 20px auto 10px auto;
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .title h2 {
  color: var(--gtla-text-light) !important;
  font-weight: 700;
  font-size: 40px;
  font-style: italic;
  line-height: 1.4em !important;
  margin: 10px auto 10px auto;
}

@media (max-width: 480px) {
  body.gtla-sales-v2 main.gtla-sales-page-v2 .title h1 { font-size: 36px; }
  body.gtla-sales-v2 main.gtla-sales-page-v2 .title h2 { font-size: 28px; }
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .title img {
  margin: 10px auto;
  max-width: 100%;
  height: auto;
}

/* =========================
   PARAGRAPH SECTION
   ========================= */

body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph {
  padding-left: var(--gtla-pad-desktop);
  padding-right: var(--gtla-pad-desktop);
  padding-top: 10px;
  padding-bottom: 20px;
}

@media (max-width: 480px) {
  body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph {
    padding-left: var(--gtla-pad-mobile);
    padding-right: var(--gtla-pad-mobile);
  }
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph h1 {
  text-align: left;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2em !important;
  margin: 10px auto;
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph h2 {
  text-align: justify;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2em !important;
  margin: 10px auto;
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph li {
  text-align: justify;
  line-height: 1.4em !important;
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

@media (max-width: 480px) {
  body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph h1 { font-size: 28px; }
  body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph h2 { font-size: 20px; }
  body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p,
  body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph li { font-size: 16px; }
}

/* =========================
   STYLE VARIATIONS
   ========================= */

/* style-1 (dark background) */
body.gtla-sales-v2 main.gtla-sales-page-v2 .style-1 { 
  background: var(--gtla-bg-dark); 
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .style-1 h1,
body.gtla-sales-v2 main.gtla-sales-page-v2 .style-1 h2 { 
  color: var(--gtla-accent) !important; 
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .style-1 p,
body.gtla-sales-v2 main.gtla-sales-page-v2 .style-1 li { 
  color: var(--gtla-text-light) !important; 
}

/* style-2 (light background) */
body.gtla-sales-v2 main.gtla-sales-page-v2 .style-2 { 
  background: var(--gtla-bg-light); 
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .style-2 h1 { 
  color: var(--gtla-accent) !important; 
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .style-2 h2,
body.gtla-sales-v2 main.gtla-sales-page-v2 .style-2 p,
body.gtla-sales-v2 main.gtla-sales-page-v2 .style-2 li { 
  color: var(--gtla-text-dark) !important; 
}

/* =========================
   LINKS IN TEXT
   ========================= */

body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p a {
  color: var(--gtla-accent);
  font-weight: 700;
  text-decoration: none;
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p a:hover { 
  text-decoration: underline; 
}

/* =========================
   PRICE SECTION
   ========================= */

body.gtla-sales-v2 main.gtla-sales-page-v2 .price {
  padding-left: var(--gtla-pad-desktop);
  padding-right: var(--gtla-pad-desktop);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background: var(--gtla-bg-dark);
}

@media (max-width: 480px) {
  body.gtla-sales-v2 main.gtla-sales-page-v2 .price {
    padding-left: var(--gtla-pad-mobile);
    padding-right: var(--gtla-pad-mobile);
  }
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .price_container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 2px solid #303030;
  border-radius: 6px;
  background: white;
  margin-bottom: 10px;
  min-width: 240px;
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .price_type {
  text-align: center;
  font-weight: 700;
  font-size: 36px;
  line-height: 120%;
  color: white;
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .price_amount {
  text-align: center;
  font-weight: 700;
  font-size: 36px;
  color: var(--gtla-accent) !important;
  background: white;
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .price_content p {
  margin: 10px 20px;
  font-weight: 500;
  font-size: 20px;
}

@media (max-width: 1200px) {
  body.gtla-sales-v2 main.gtla-sales-page-v2 .price_content p.price_content_exclude {
    display: none;
  }
}

/* =========================
   CTA BUTTONS (Thrivecart + Standard)
   ========================= */

/* Base styles pour tous les CTA */
body.gtla-sales-v2 main.gtla-sales-page-v2 a.button,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button {
  color: white !important;
  border: 2px solid var(--gtla-cta);
  border-radius: 6px;
  font-weight: 700 !important;
  background-color: var(--gtla-cta);
  text-align: center;
  position: relative;
  font-family: var(--gtla-font-cta);
  padding: 15px 18px;
  display: inline-block;

  /* Suppression complète des soulignements */
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  box-shadow: none !important;
  border-bottom: 0 !important;
  background-image: none !important;

  /* Smooth transitions */
  transition: filter 0.15s ease, transform 0.15s ease;
  
  /* Performance: will-change pour transitions fluides */
  will-change: filter, transform;
}

/* Protection des éléments enfants (notamment <span> de ThriveCart) */
body.gtla-sales-v2 main.gtla-sales-page-v2 a.button *,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* Taille boutons standards */
body.gtla-sales-v2 main.gtla-sales-page-v2 a.button {
  font-size: 32px;
}

/* Taille boutons Thrivecart */
body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button {
  font-size: 22px !important;
  padding: 12px 16px !important;
}

/* Espacement harmonisé avant les boutons */
/* Objectif: même espace SOUS le bouton que le 1er (≈30px) */

/* Cas général: sections .paragraph avec padding-bottom:20px
   => margin-bottom 10px + padding-bottom 20px = 30px */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p:has(a.button),
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p:has(a.thrivecart-button) {
  margin-top: 22px !important;
  margin-bottom: 10px !important;
}

/* Cas HERO: ton .title .paragraph est à padding:0 (inline)
   => on remet margin-bottom 30px pour matcher le 1er bouton */
body.gtla-sales-v2 main.gtla-sales-page-v2 .title .paragraph p:has(a.button),
body.gtla-sales-v2 main.gtla-sales-page-v2 .title .paragraph p:has(a.thrivecart-button) {
  margin-bottom: 30px !important;
}


/* Responsive mobile */
@media (max-width: 480px) {
  body.gtla-sales-v2 main.gtla-sales-page-v2 a.button,
  body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button {
    font-size: 22px !important;
    line-height: 1.2em;
    padding: 12px 14px !important;
  }
}

/* Hover effects (desktop seulement) */
@media (hover:hover) and (pointer:fine) {
  body.gtla-sales-v2 main.gtla-sales-page-v2 a.button:hover,
  body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    text-decoration: none !important;
    box-shadow: none !important;
    background-image: none !important;
    border-bottom: 0 !important;
  }
}

/* Focus states (accessibilité) */
body.gtla-sales-v2 main.gtla-sales-page-v2 a.button:focus,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button:focus,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.button:focus-visible,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button:focus-visible {
  outline: 2px solid rgba(255,255,255,0.45);
  outline-offset: 2px;
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
}

/* Visited state */
body.gtla-sales-v2 main.gtla-sales-page-v2 a.button:visited,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button:visited {
  color: white !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
}

/* Désactivation de la sélection de texte sur les CTA */
body.gtla-sales-v2 main.gtla-sales-page-v2 a.button,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.button *,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  cursor: pointer;
}

/* Protection du ::selection */
body.gtla-sales-v2 main.gtla-sales-page-v2 a.button::selection,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button::selection,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.button *::selection,
body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button *::selection {
  background: transparent !important;
  color: inherit !important;
}

/* =========================
   LISTES (UL/OL) — RESTAURE LES BULLETS
   ========================= */

body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ul,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ol {
  list-style: disc outside !important;
  margin: 0 0 3px 0 !important;
  padding-left: 1.25em !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ol {
  list-style: decimal outside !important;
}

/* Items de liste */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph li {
  display: list-item !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  text-align: left;
}

/* Sous-listes */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ul ul,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ol ol,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ul ol,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ol ul {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-left: 1.25em !important;
}

/* Puces visibles */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ul li::marker,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ol li::marker {
  font-weight: 700;
}

/* =========================
   ESPACEMENT PARAGRAPHES ET LISTES
   ========================= */

/* Normalise les marges de base - ULTRA FORCE contre Divi */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ul,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph ol {
  margin: 0 0 3px 0 !important;
  padding-left: 3.5em !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
}

/* Cas 1 : ul/ol arrive juste après p */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p + ul,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p + ol {
  margin-top: 0 !important;
}

/* Cas 2 : l'éditeur insère un <br> entre p et ul */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p + br + ul,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p + br + ol {
  margin-top: 0 !important;
}

/* Cas 3 : l'éditeur insère un <p> vide entre p et ul */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p + p + ul,
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p + p + ol {
  margin-top: 0 !important;
}

/* Masque les <p> réellement vides */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Masque les <p><br></p> (pattern courant des éditeurs WYSIWYG) */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p > br:only-child {
  display: none !important;
}

/* Espacement identique sous chaque bouton ThriveCart */
.gtla-sales-page-v2 p.gtla-cta{
  text-align: center;
  margin: 0 0 1em 0 !important;   /* <- même logique que le 1er (à ajuster si besoin) */
  padding-bottom: 0 !important;   /* neutralise les règles Divi sur les <p> */
}

.gtla-sales-page-v2 p.gtla-cta a.thrivecart-button{
  display: inline-block;
}

/* =========================
   FIX CENTRAGE CTA (p.gtla-cta)
   À coller TOUT EN BAS du CSS
   ========================= */

/* Le wrapper du CTA : on override le justify global */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph p.gtla-cta,
body.gtla-sales-v2 main.gtla-sales-page-v2 .title .paragraph p.gtla-cta,
body.gtla-sales-v2 main.gtla-sales-page-v2 p.gtla-cta {
  /* override du justify */
  text-align: center !important;

  /* centrage robuste même si le <a> devient block */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap;

  /* neutralise les paddings/marges imposés ailleurs */
  padding: 0 !important;

  /* espace “normal” avant/après CTA (ajuste si besoin) */
  margin-top: 22px !important;
  margin-bottom: 10px !important;
}

/* Cas HERO : si ton bloc CTA est dans .title avec padding inline à 0,
   on remet un bas plus grand pour matcher ton rythme visuel */
body.gtla-sales-v2 main.gtla-sales-page-v2 .title .paragraph p.gtla-cta {
  margin-bottom: 30px !important;
}

/* Le bouton lui-même : on le rend centrable quoi qu’il arrive */
body.gtla-sales-v2 main.gtla-sales-page-v2 p.gtla-cta > a.button,
body.gtla-sales-v2 main.gtla-sales-page-v2 p.gtla-cta > a.thrivecart-button {
  display: inline-block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* sécurité si un thème/JS applique des décalages */
  left: auto !important;
  right: auto !important;
}

/* Si ThriveCart wrappe avec des spans internes */
body.gtla-sales-v2 main.gtla-sales-page-v2 p.gtla-cta a.button *,
body.gtla-sales-v2 main.gtla-sales-page-v2 p.gtla-cta a.thrivecart-button * {
  text-align: center !important;
}

/* =========================
   COMPTE À REBOURS - SALES PAGE V2
   À ajouter à la fin de sales-page-v2.css
   ========================= */

/* Container principal */
.gtla-countdown {
  padding: 20px var(--gtla-pad-desktop);
  text-align: center;
  background: var(--gtla-accent);
  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}

@media (max-width: 480px) {
  .gtla-countdown {
    padding: 15px var(--gtla-pad-mobile);
  }
}

/* Message du compte à rebours */
.gtla-countdown-message {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--gtla-font-cta);
}

@media (max-width: 480px) {
  .gtla-countdown-message {
    font-size: 16px;
    margin-bottom: 10px;
  }
}

/* Container des blocs de temps */
.gtla-countdown-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .gtla-countdown-display {
    gap: 10px;
  }
}

/* Bloc individuel (jour/heure/minute/seconde) */
.gtla-countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 18px;
  min-width: 80px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 480px) {
  .gtla-countdown-block {
    min-width: 65px;
    padding: 10px 12px;
  }
}

/* Valeur numérique */
.gtla-countdown-value {
  color: white;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--gtla-font-cta);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
  .gtla-countdown-value {
    font-size: 28px;
  }
}

/* Label (jours/heures/etc) */
.gtla-countdown-label {
  color: rgba(255, 255, 255, 0.95);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
  font-family: var(--gtla-font-base);
}

@media (max-width: 480px) {
  .gtla-countdown-label {
    font-size: 11px;
    margin-top: 4px;
  }
}

/* État: avant ouverture (optionnel: couleur différente) */
.gtla-countdown-before {
  background: var(--gtla-bg-dark);
}

.gtla-countdown-before .gtla-countdown-message {
  color: var(--gtla-accent);
}

.gtla-countdown-before .gtla-countdown-block {
  background: rgba(122, 152, 224, 0.15);
  border-color: rgba(122, 152, 224, 0.3);
}

.gtla-countdown-before .gtla-countdown-value {
  color: var(--gtla-accent);
}

/* État: inscriptions ouvertes (couleur accent actuelle) */
.gtla-countdown-open {
  background: var(--gtla-accent);
}

/* Animation subtile sur les valeurs (optionnel) */
@keyframes gtla-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.gtla-countdown-open .gtla-countdown-value {
  animation: gtla-pulse 2s ease-in-out infinite;
}

/* État: inscriptions fermées */
.gtla-countdown-closed {
  background: var(--gtla-bg-dark);
  padding: 20px;
}

.gtla-countdown-closed .gtla-countdown-message {
  color: #999;
  font-size: 18px;
  margin: 0;
  text-transform: none;
  font-weight: 500;
}

@media (max-width: 480px) {
  .gtla-countdown-closed {
    padding: 15px;
  }
  
  .gtla-countdown-closed .gtla-countdown-message {
    font-size: 16px;
  }
}

/* Séparateur visuel entre les blocs (optionnel, style plus "digital") */
.gtla-countdown-block + .gtla-countdown-block::before {
  content: ':';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 24px;
  font-weight: 700;
  opacity: 0.6;
}

@media (max-width: 480px) {
  .gtla-countdown-block + .gtla-countdown-block::before {
    font-size: 20px;
    left: -8px;
  }
}

/* Fix pour le séparateur (position relative sur le parent) */
.gtla-countdown-block {
  position: relative;
}

/* Cache le séparateur sur mobile si trop serré */
@media (max-width: 380px) {
  .gtla-countdown-block + .gtla-countdown-block::before {
    display: none;
  }
}

/* Effet de brillance subtil (optionnel, pour rendre plus "premium") */
.gtla-countdown-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}

/* =========================
   FAQ — aligner la taille des questions sur le texte standard
   + réponses visuellement distinctes mais cohérentes
   ========================= */

/* 1) Base: on donne à la FAQ la même "taille de texte" que tes <p> */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item {
  font-size: 20px;        /* = .paragraph p */
  line-height: 1.4;
}

@media (max-width: 480px) {
  body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item {
    font-size: 16px;      /* = .paragraph p mobile */
  }
}

/* 2) Question (= summary) : même taille que le texte, mais plus "headline" */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item summary {
  font-size: 1em !important;        /* 1em = taille définie sur .faq-item */
  font-weight: 700 !important;
  line-height: 1.4em !important;

  /* rendu propre et cliquable */
  display: flex;
  align-items: center;
  gap: 10px;

  /* tu gardes ton padding, on le rend juste plus cohérent */
  padding: 12px 40px 12px 0 !important;
  margin: 0 !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* 3) Icône + / − : un peu plus "pro", alignée sur la ligne */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item summary::after {
  font-size: 1.4em; /* au lieu de 28px fixe */
  right: 10px;
}

/* 4) Réponse : cartouche léger + accent, et texte légèrement différent */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item .faq-answer {
  margin-top: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--gtla-accent);
  border-radius: 10px;

  /* par défaut (style-2 clair) */
  background: rgba(122, 152, 224, 0.10);

  /* petit décroché visuel */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Quand c'est ouvert, on "révèle" la réponse */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item details[open] .faq-answer {
  opacity: 1;
  transform: translateY(0);
}

/* Texte de réponse : un poil plus petit + moins gras => contraste subtil */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item .faq-answer p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95em !important;  /* légèrement plus petit que la question */
  font-weight: 500 !important;
  line-height: 1.45em !important;
}

/* Optionnel: si un jour tu mets une FAQ dans une section .style-1 (fond sombre) */
body.gtla-sales-v2 main.gtla-sales-page-v2 .style-1 .faq-item summary {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
body.gtla-sales-v2 main.gtla-sales-page-v2 .style-1 .faq-item .faq-answer {
  background: rgba(255, 255, 255, 0.08);
}

/* =========================
   FAQ — Indicateur visuel "dépliable" (chevron à gauche)
   ========================= */

/* On prépare le summary pour accueillir un chevron à gauche */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item summary {
  position: relative;
  padding-left: 28px !important; /* espace pour le chevron */
}

/* Chevron à gauche */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item summary::before {
  content: '▶';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 0.95em;
  opacity: 0.9;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Quand ouvert : chevron tourne */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item details[open] summary::before {
  transform: translateY(-50%) rotate(90deg);
  opacity: 1;
}

/* Hover/focus : on donne un feedback clair "c'est cliquable" */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item summary:hover {
  opacity: 1;
  text-decoration: none;
}

body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item summary:focus-visible {
  outline: 2px solid rgba(122, 152, 224, 0.45);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Optionnel: quand c'est ouvert, on "teinte" légèrement la question */
body.gtla-sales-v2 main.gtla-sales-page-v2 .paragraph .faq-item details[open] summary {
  background: rgba(122, 152, 224, 0.08);
  border-radius: 10px;
  padding-right: 40px !important; /* conserve ton espace pour le + / − */
}

/* =========================
   CTA — empêcher l’ellipsis sur mobile (wrap du texte)
   ========================= */
@media (max-width: 480px) {

  body.gtla-sales-v2 main.gtla-sales-page-v2 a.button,
  body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button {
    /* enlève l’ellipsis */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    /* wrap propre */
    max-width: 100% !important;
    line-height: 1.15 !important;
    text-align: center !important;

    /* très robuste si un parent est en flex */
    min-width: 0 !important;

    /* bonus : évite les débordements sur mots longs */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto;
  }

  /* ThriveCart met souvent le texte dans des spans => on force aussi */
  body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button span,
  body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* =========================================================
   CTA ThriveCart — empêcher "..." sur mobile (wrap du texte)
   À mettre TOUT EN BAS du CSS
   ========================================================= */
@media (max-width: 480px) {

  /* Le bouton */
  body.gtla-sales-v2 main.gtla-sales-page-v2 p.gtla-cta > a.thrivecart-button,
  body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button.thrivecart-button-styled {
    /* retire l’ellipsis */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    /* wrap propre */
    max-width: 100% !important;
    min-width: 0 !important;      /* important en contexte flex */
    line-height: 1.15 !important;
    text-align: center !important;

    /* évite les débordements sur mots/phrases longues */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto;

    /* optionnel: meilleur rendu si le texte passe sur 2 lignes */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Si ThriveCart injecte des spans internes */
  body.gtla-sales-v2 main.gtla-sales-page-v2 a.thrivecart-button * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* OPTIONNEL (souvent top sur mobile) : bouton pleine largeur */
  body.gtla-sales-v2 main.gtla-sales-page-v2 p.gtla-cta > a.thrivecart-button {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

.gtla-cta .tc-v2-embeddable-trigger-el{
  font-size:22px !important;
  padding:12px 16px !important;
  background-color:#2ED5A0 !important;
  border-radius:0.25em !important;
  color:#fff !important;
  text-decoration:none !important;
  display:inline-block !important;
}

.gtla-cta .gtla-btn{
  font-size:22px !important;
  padding:12px 16px !important;
  background-color:#2ED5A0 !important;
  border-radius:0.25em !important;
  color:#fff !important;
  display:inline-block !important;
  text-decoration:none !important;
  border:0 !important;
  cursor:pointer !important;
}

.gtla-cta .gtla-btn:hover{
  opacity:0.92;
}