/* ==========================================================================
   LITTLECREEK FINANCE v3 - PAGES.CSS
   Restructuration des pages "avis broker" (enfants de /brokers-forex/).

   PROBLEME : le post_content de ces pages a ete construit avec l'ancien
   theme Flatsome / UX-Builder + le plugin WP Table Builder. Les primitives
   de layout de ce builder (.row / .col / .col-inner / .icon-box /
   .testimonial-box / .star-rating / .is-divider / .img-inner.box-shadow-3 /
   .page-header-wrapper / .wptb-*) n'ont plus de CSS dans le theme v3 :
   les grilles s'effondrent en pile verticale non stylee -> "deструcturation".

   SOLUTION : ON NE TOUCHE PAS AU CONTENU. On re-style ces classes
   orphelines pour reproduire le systeme visuel de brokernotes.co
   (layout 2 colonnes, encadres "key facts", rating box, pros/cons,
   tables de donnees, sections a ancres, typographie hierarchisee).

   Charge automatiquement par functions.php (apres components.css)
   si le fichier existe. Selecteurs portee a .lc-single__content.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. NEUTRALISATION du double titre injecte dans le contenu
   Le builder a insere un bloc .page-header-wrapper / .page-title contenant
   un <h1 class="entry-title"> qui DUPLIQUE le <h1> du template page.php.
   On masque ce doublon (le H1 du theme reste, le contenu est intact).
   -------------------------------------------------------------------------- */

.lc-single__content .page-header-wrapper,
.lc-single__content .page-title,
.lc-single__content .title-breadcrumbs {
  display: none !important;
}

/* --------------------------------------------------------------------------
   1. SYSTEME DE GRILLE UX-BUILDER (.row / .col / .col-inner)
   brokernotes : sections en colonnes, gouttiere ~32px, stack en mobile.
   -------------------------------------------------------------------------- */

.lc-single__content .row {
  display: flex;
  flex-wrap: wrap;
  margin: var(--lc-sp-8) 0;
  gap: var(--lc-sp-6);
  align-items: stretch;
}

.lc-single__content .row::before,
.lc-single__content .row::after {
  content: none !important;
  display: none !important;
}

.lc-single__content .col {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  padding: 0;
}

/* Largeurs de colonnes Flatsome (sur 12) - desktop */
.lc-single__content .col.large-1  { flex-basis: 6%; }
.lc-single__content .col.large-2  { flex-basis: 14%; }
.lc-single__content .col.large-3  { flex-basis: 22%; }
.lc-single__content .col.large-4  { flex-basis: 30%; }
.lc-single__content .col.large-5  { flex-basis: 39%; }
.lc-single__content .col.large-6  { flex-basis: calc(50% - var(--lc-sp-6)); }
.lc-single__content .col.large-7  { flex-basis: 57%; }
.lc-single__content .col.large-8  { flex-basis: 65%; }
.lc-single__content .col.large-9  { flex-basis: 73%; }
.lc-single__content .col.large-10 { flex-basis: 82%; }
.lc-single__content .col.large-12 { flex-basis: 100%; }

.lc-single__content .col-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Une .row marquee box-shadow = paire de cards (ex: instruments / marches) */
.lc-single__content .row-box-shadow-3 > .col > .col-inner,
.lc-single__content .row-box-shadow-5-hover > .col > .col-inner {
  background: var(--lc-light-pure);
  border: 1px solid var(--lc-light-border);
  border-radius: var(--lc-radius-lg);
  padding: var(--lc-sp-6) var(--lc-sp-7);
  box-shadow: var(--lc-shadow-sm);
  transition: box-shadow var(--lc-transition), transform var(--lc-transition);
}
.lc-single__content .row-box-shadow-5-hover > .col > .col-inner:hover {
  box-shadow: var(--lc-shadow-md);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   2. RATING / "EN UN COUP D'OEIL" BOX (.icon-box.testimonial-box)
   Equivalent brokernotes "Ratings Summary" / score box : encadre accentue.
   -------------------------------------------------------------------------- */

.lc-single__content .icon-box.testimonial-box,
.lc-single__content .icon-box {
  display: block;
  position: relative;
  background: var(--lc-light-soft);
  border: 1px solid var(--lc-light-border);
  border-left: 4px solid var(--lc-violet);
  border-radius: var(--lc-radius-md);
  padding: var(--lc-sp-7) var(--lc-sp-7);
  margin: var(--lc-sp-10) 0;
}

.lc-single__content .icon-box-text {
  margin: 0;
}

.lc-single__content .icon-box .testimonial-text h2,
.lc-single__content .icon-box h2 {
  margin: 0 0 var(--lc-sp-2);
  font-size: var(--lc-fs-2xl);
  font-weight: var(--lc-fw-extrabold);
  color: var(--lc-text-dark);
}

.lc-single__content .testimonial-text {
  font-style: normal;
  color: var(--lc-text-on-light);
}

.lc-single__content .testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--lc-sp-3);
  font-size: var(--lc-fs-sm);
  color: var(--lc-text-on-light-secondary);
}
.lc-single__content .testimonial-name { color: var(--lc-text-dark); }

/* Etoiles de notation (.star-rating) - style brokernotes (orange) */
.lc-single__content .star-rating {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  margin-bottom: var(--lc-sp-3);
  font-family: Arial, sans-serif;
  color: var(--lc-light-border);
}
.lc-single__content .star-rating::before {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  left: 0; top: 0;
  letter-spacing: 2px;
  color: var(--lc-light-border);
}
.lc-single__content .star-rating > span {
  position: absolute;
  left: 0; top: 0;
  overflow: hidden;
  white-space: nowrap;
}
.lc-single__content .star-rating > span::before {
  content: "\2605\2605\2605\2605\2605";
  letter-spacing: 2px;
  color: #E77E04; /* accent orange brokernotes */
}
.lc-single__content .star-rating .rating { display: none; }

/* --------------------------------------------------------------------------
   3. DIVIDERS (.is-divider) - separateurs de sections discrets
   -------------------------------------------------------------------------- */

.lc-single__content .is-divider,
.lc-single__content .divider {
  display: block;
  height: 1px;
  width: 100%;
  max-width: 64px;
  background: var(--lc-violet);
  opacity: 0.55;
  border: 0;
  margin: var(--lc-sp-10) 0 var(--lc-sp-8);
}

/* --------------------------------------------------------------------------
   4. IMAGES (.img / .img-inner.box-shadow-3)
   -------------------------------------------------------------------------- */

.lc-single__content .img,
.lc-single__content .img-inner {
  display: block;
  width: 100%;
}
.lc-single__content .img-inner {
  border-radius: var(--lc-radius-md);
  overflow: hidden;
}
.lc-single__content .img-inner.box-shadow-3 {
  box-shadow: var(--lc-shadow-md);
}
.lc-single__content .img img,
.lc-single__content .img-inner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--lc-radius-md);
}

/* Generic Flatsome box-shadow helper */
.lc-single__content .box-shadow-3 { border-radius: var(--lc-radius-md); }

/* --------------------------------------------------------------------------
   5. WP TABLE BUILDER (.wptb-*) - tables de donnees style brokernotes
   (header navy, lignes alternees, bordures legeres).
   -------------------------------------------------------------------------- */

.lc-single__content .wptb-preview-table,
.lc-single__content table.wptb-preview-table {
  width: 100% !important;
  border-collapse: collapse;
  border-spacing: 0;
  margin: var(--lc-sp-8) 0;
  font-size: var(--lc-fs-sm);
  background: var(--lc-light-pure);
  border: 1px solid var(--lc-light-border);
  border-radius: var(--lc-radius-md);
  overflow: hidden;
  display: table;
}

.lc-single__content .wptb-preview-table .wptb-row,
.lc-single__content .wptb-preview-table tr {
  border-bottom: 1px solid var(--lc-light-border);
}
.lc-single__content .wptb-preview-table tr:last-child { border-bottom: 0; }

.lc-single__content .wptb-preview-table .wptb-cell,
.lc-single__content .wptb-preview-table td {
  padding: var(--lc-sp-4) var(--lc-sp-5) !important;
  vertical-align: top;
  color: var(--lc-text-on-light);
  border: 0;
  text-align: left;
}

/* 1ere ligne = header (style navy brokernotes) */
.lc-single__content .wptb-preview-table tr:first-child {
  background: var(--lc-text-dark);
}
.lc-single__content .wptb-preview-table tr:first-child .wptb-cell,
.lc-single__content .wptb-preview-table tr:first-child td {
  color: #FFFFFF;
  font-weight: var(--lc-fw-bold);
  text-transform: uppercase;
  font-size: var(--lc-fs-xs);
  letter-spacing: 0.06em;
}
.lc-single__content .wptb-preview-table tr:first-child .wptb-cell *,
.lc-single__content .wptb-preview-table tr:first-child td * {
  color: #FFFFFF !important;
}

/* 1ere colonne = label en gras */
.lc-single__content .wptb-preview-table td:first-child {
  font-weight: var(--lc-fw-semibold);
  color: var(--lc-text-dark);
}

.lc-single__content .wptb-preview-table tr:nth-child(even of :not(:first-child)) {
  background: var(--lc-light-soft);
}
.lc-single__content .wptb-preview-table tbody tr:hover {
  background: var(--lc-violet-soft);
}

.lc-single__content .wptb-text-container,
.lc-single__content .wptb-ph-element {
  margin: 0;
}
.lc-single__content .wptb-text-container p { margin: 0 !important; }

/* Conteneur scrollable en mobile */
.lc-single__content .wptb-preview-table-fixer,
.lc-single__content .wptb-table-container {
  overflow-x: auto;
  width: 100%;
}

/* --------------------------------------------------------------------------
   6. TABLES HTML GENERIQUES (au cas ou certaines pages en aient)
   -------------------------------------------------------------------------- */

.lc-single__content > table,
.lc-single__content .entry-content table:not(.wptb-preview-table) {
  width: 100%;
  border-collapse: collapse;
  margin: var(--lc-sp-8) 0;
  font-size: var(--lc-fs-sm);
  border: 1px solid var(--lc-light-border);
  border-radius: var(--lc-radius-md);
  overflow: hidden;
}
.lc-single__content table:not(.wptb-preview-table) th {
  background: var(--lc-text-dark);
  color: #FFFFFF;
  text-align: left;
  padding: var(--lc-sp-4) var(--lc-sp-5);
  font-size: var(--lc-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lc-single__content table:not(.wptb-preview-table) td {
  padding: var(--lc-sp-4) var(--lc-sp-5);
  border-top: 1px solid var(--lc-light-border);
  color: var(--lc-text-on-light);
}
.lc-single__content table:not(.wptb-preview-table) tr:nth-child(even) td {
  background: var(--lc-light-soft);
}

/* --------------------------------------------------------------------------
   7. TYPOGRAPHIE & LISTES - hierarchie brokernotes appliquee au contenu
   (renforce ce que components.css fait deja, scope contenu broker).
   -------------------------------------------------------------------------- */

.lc-single__content h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--lc-fw-extrabold);
  line-height: var(--lc-lh-snug);
  color: var(--lc-text-dark);
  margin: var(--lc-sp-12) 0 var(--lc-sp-4);
  padding-bottom: var(--lc-sp-3);
  border-bottom: 1px solid var(--lc-light-border);
  scroll-margin-top: 100px;
}

.lc-single__content h3 {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: var(--lc-fw-bold);
  color: var(--lc-text-dark);
  margin: var(--lc-sp-8) 0 var(--lc-sp-3);
  scroll-margin-top: 100px;
}

/* H3 a l'interieur des cards pros/cons : pas de gros margin-top */
.lc-single__content .col-inner > h3:first-child {
  margin-top: 0;
}

.lc-single__content p {
  margin: 0 0 var(--lc-sp-5);
  line-height: 1.75;
}

.lc-single__content ul,
.lc-single__content ol {
  margin: 0 0 var(--lc-sp-5);
  padding-left: 0;
  list-style: none;
}

.lc-single__content ul li {
  position: relative;
  padding-left: var(--lc-sp-7);
  margin-bottom: var(--lc-sp-3);
  line-height: 1.65;
}
.lc-single__content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 16px;
  height: 16px;
  background: var(--lc-violet-soft);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--lc-violet);
}
.lc-single__content ul li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  background: var(--lc-violet);
  border-radius: 50%;
}

.lc-single__content ol {
  counter-reset: lc-ol;
}
.lc-single__content ol li {
  position: relative;
  padding-left: var(--lc-sp-8);
  margin-bottom: var(--lc-sp-3);
  counter-increment: lc-ol;
  line-height: 1.65;
}
.lc-single__content ol li::before {
  content: counter(lc-ol);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lc-violet);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: var(--lc-fw-bold);
  border-radius: 50%;
}

.lc-single__content li > ul,
.lc-single__content li > ol {
  margin-top: var(--lc-sp-3);
}

/* Liens : accent violet souligne (style brokernotes) */
.lc-single__content a {
  color: var(--lc-violet);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: var(--lc-fw-semibold);
}
.lc-single__content a:hover { color: var(--lc-violet-dark, #5b3fd0); }

/* Bouton CTA (.button du builder) -> bouton accent brokernotes */
.lc-single__content a.button,
.lc-single__content .button {
  display: inline-flex;
  align-items: center;
  gap: var(--lc-sp-2);
  padding: 14px 28px;
  background: var(--lc-gradient);
  color: #FFFFFF !important;
  border-radius: var(--lc-radius-full);
  font-weight: var(--lc-fw-bold);
  text-decoration: none;
  font-size: var(--lc-fs-base);
  box-shadow: var(--lc-shadow-sm);
  transition: transform var(--lc-transition), box-shadow var(--lc-transition);
}
.lc-single__content a.button:hover {
  transform: translateY(-2px);
  box-shadow: var(--lc-shadow-md);
}

/* Premier paragraphe = chapeau / intro plus large */
.lc-single__content > p:first-of-type:not(:only-of-type) {
  font-size: var(--lc-fs-lg);
  color: var(--lc-text-on-light-secondary);
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .lc-single__content .row { gap: var(--lc-sp-5); }
  .lc-single__content .col,
  .lc-single__content .col.large-6,
  .lc-single__content .col.large-4,
  .lc-single__content .col.large-3,
  .lc-single__content .col.large-8 {
    flex: 1 1 100%;
    flex-basis: 100%;
  }
}

@media (max-width: 782px) {
  .lc-single__content .icon-box.testimonial-box,
  .lc-single__content .icon-box {
    padding: var(--lc-sp-5) var(--lc-sp-5);
  }
  .lc-single__content .row-box-shadow-3 > .col > .col-inner,
  .lc-single__content .row-box-shadow-5-hover > .col > .col-inner {
    padding: var(--lc-sp-5);
  }
  .lc-single__content h2 { margin-top: var(--lc-sp-9); }
}

/* ==========================================================================
   HUB PAGES (top-level: /brokers-forex/, /brokers-crypto/, /comparateur/, /comparer/)
   - sidebar masquee, contenu centre, padding top genereux (pas de hero image)
   ========================================================================== */
.lc-page-hub .lc-single__layout {
  grid-template-columns: 1fr !important;
  max-width: 1040px;
  padding-top: 64px;
}
.lc-page-hub .lc-toc { display: none !important; }
.lc-page-hub .lc-single__article {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.lc-page-hub .lc-single__article > h1 {
  text-align: center;
  margin-bottom: 24px;
}
.lc-page-hub .lc-single__meta {
  justify-content: center;
}
.lc-page-hub .lc-kicker {
  display: block;
  text-align: center;
  margin-bottom: 12px;
}
@media (max-width: 1024px) {
  .lc-page-hub .lc-single__layout { padding-top: 32px; }
}