/* =========================================================
   Jetrouvelamour — Custom CSS
   (modifs : typo + retenir + johnson + faq)
========================================================= */

/* =========================
   0) Base / Typographie globale
========================= */

:root{
  --jta-font: "PT Sans Narrow", Sans-serif;

  /* Palette sans orange/bleu pour les blocs éditoriaux */
  --jta-red: #d1072d;
  --jta-red-dark: #b10625;
  --jta-text: #1f2937;
  --jta-muted: #6b7280;
  --jta-border: #e5e7eb;
  --jta-soft: #f6f7f9;   /* neutre */
  --jta-soft2: #fbfbfc;  /* neutre */
}

/* Force la typo sur la majorité du site (le thème/Elementor peuvent surcharger sinon) */
body,
button,
input,
select,
textarea,
.entry-content,
.widget,
.widget-title,
.entry-title,
.tg-page-header .tg-page-header__title,
.tg-page-content__title{
  font-family: var(--jta-font) !important;
}


/* =========================
   1) Header / Footer / Global UI
========================= */

.captcha {
  padding-bottom: 20px;
}

.tg-site-header {
  padding: 0 0 1em;
  background-color: #000 !important;
}

/* NB : ton fichier contenait 2 fois .tg-site-footer-bar (blanc puis gris).
   Je garde la version finale effective (gris). */
.tg-site-footer .tg-site-footer-bar {
  color: #798189;
}

.tg-scroll-to-top {
  background-color: #d1072d !important;
}


/* =========================
   2) Background Elementor (page 243)
========================= */

.elementor-243 .elementor-element.elementor-element-0156a12:not(.elementor-motion-effects-element-type-background),
.elementor-243 .elementor-element.elementor-element-0156a12 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("https://www.jetrouvelamour.com/wp-content/uploads/2019/01/fond.jpg") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}


/* =========================
   3) Titres / Texte / Liens / Contenu
========================= */

.tg-page-header .tg-page-header__title,
.tg-page-content__title {
  font-family: var(--jta-font) !important;
  line-height: 45px;
  font-size: 45px;
  font-style: normal;
  font-weight: 600 !important;
  /* text-transform: uppercase !important; */
  color: #d1072d !important;
}

.intertitre {
  font-family: var(--jta-font) !important;
  line-height: 30px !important;
  color: #313233 !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  /* text-transform: uppercase !important; */
  text-align: left !important;
}

.entry-title:not(.tg-page-content__title) {
  font-family: var(--jta-font) !important;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  color: #444444 !important;
}

.entry-title:not(.tg-page-content__title) a {
  color: #444 !important;
  text-decoration: none !important;
  transition: color 0.35s ease-in-out !important;
}
.entry-title:not(.tg-page-content__title) a:hover {
  color: #d1072e !important;
}

.entry-content p {
  margin-bottom: 2.5em !important;
  line-height: 1.3em !important;
  text-align: justify !important;
}

.entry-content a {
  color: #d1072d;
  text-decoration: none !important;
}

.site-content {
  margin-top: 0px !important;
  margin-bottom: 20px !important;
}

/* Listes numérotées custom */
.entry-content ul { list-style: none; }
.entry-content ol { list-style: none; counter-reset: li; }

.entry-content li::before {
  content: counter(li);
  color: #444;
  font-weight: 700;
  display: inline-block;
  width: 1.1em;
  margin-left: -1em;
}
.entry-content li {
  counter-increment: li;
  margin-top: 15px;
  line-height: 24px;
}

/* H3 */
.entry-content h3 {
  font-family: var(--jta-font) !important;
  line-height: 24px !important;
  color: #444444 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-align: left !important;
}


/* =========================
   4) Forms / Boutons
========================= */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  font-family: var(--jta-font) !important;
  font-size: 35px !important;
  font-weight: normal !important;
  text-transform: none !important;
  border: none !important;
  background-color: #39b900 !important;
  color: #fff !important;
  padding: 0.7rem 1rem !important;
  border-radius: 2rem !important;
  width: 100%;
}

input[type="submit"]:hover {
  font-family: var(--jta-font) !important;
  font-size: 35px !important;
  font-weight: normal !important;
  text-transform: none !important;
  border: none !important;
  background-color: #d1072e !important;
  color: #fff !important;
  padding: 0.7rem 1rem !important;
  border-radius: 2rem !important;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
select,
textarea {
  font-family: var(--jta-font) !important;
  color: #16181a;
  border: 3px solid #dee2e6 !important;
  padding: 0.7rem 1rem !important;
  width: 100%;
  border-radius: 0 !important;
}

/* Cookie notice */
#cookie-notice {
  visibility: hidden;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}


/* =========================
   5) Sidebar / Widgets
========================= */

#secondary {
  border-left: 0 none !important;
  background-color: #F9F9F9 !important;
  padding: 40px 40px 40px 60px !important;
}

.widget {
  margin: 0 0 2.5rem !important;
  text-align: left !important;
  text-transform: uppercase !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #444444 !important;
  font-family: var(--jta-font) !important;
}

.widget-title {
  color: #fff;
  margin-bottom: 14px;
  font-family: var(--jta-font) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: initial !important;
  text-align: left !important;
}

.widget ul li {
  border-bottom: 1px solid #444;
  padding: 0.5rem 0;
}

.widget-area .widget-title {
  color: #d1072e !important;
  margin-bottom: 14px;
  font-family: var(--jta-font) !important;
  font-size: 35px !important;
  font-weight: 600 !important;
  /* text-transform: uppercase !important; */
  text-align: left !important;
}

.widget-area ul li {
  border-bottom: none;
  padding: 0.5rem 0;
}

/* Menu widget */
.widget_nav_menu {
  text-align: left !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #444444 !important;
  text-transform: none !important;
  font-family: var(--jta-font) !important;
}

.widget_nav_menu a {
  text-align: left !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-transform: none !important;
  font-family: var(--jta-font) !important;
}
.widget_nav_menu a:hover {
  color: #d1072e !important;
}


/* =========================
   6) Post grid / PT-CV / Read more / Catégories
========================= */

.pt-cv-title {
  margin-bottom: 10px !important;
  text-align: center !important;
  color: #444444 !important;
  font-size: 18px !important;
  font-family: var(--jta-font) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 18px 8px 18px 8px !important;
  /* border: 2px solid #d2d2d2 !important; */
  margin-top: -10px !important;
}

.pt-cv-title a { color: #444444 !important; }
.pt-cv-title a:hover { color: #d1072e !important; }

.pt-cv-meta-fields {
  font-family: var(--jta-font) !important;
  font-size: 15px !important;
  margin-top: 0 !important;
  text-align: center !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
.pt-cv-meta-fields a { color: #d1072e !important; }

.tg-read-more-wrapper {
  font-family: var(--jta-font) !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  border: none !important;
  background-color: #66cc33 !important;
  padding-top: 4px !important;
  border-radius: 3px !important;
  width: 120px !important;
  height: 40px !important;
  float: right !important;
}
.tg-read-more-wrapper a {
  color: #ffffff !important;
  text-decoration: none !important;
}
.tg-read-more-wrapper a:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #d1072e;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  margin-top: -4px;
  padding-top: 4px;
  border-radius: 3px;
  width: 120px;
  height: 40px;
  float: right;
}

/* Catégories / meta */
.cat-item a { color: #444444 !important; }
.cat-item a:hover { color: #d1072e !important; }

.url { color: #d1072e !important; }
.published { color: #798189 !important; }

.comments-link a { color: #d1072e !important; }
.cat-links a { color: #d1072e !important; }


/* =========================
   7) Boutons spécifiques
========================= */

.btn_inscription_v2 {
  font-family: var(--jta-font) !important;
  background: #39b900;
  display: block;
  padding: 8px 0;
  font-size: 23px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  margin: 0;
  text-transform: none;
  border-radius: 2rem;
}
.btn_inscription_v2:hover {
  background: #d1072e;
  display: block;
  padding: 8px 0;
  font-size: 23px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  margin: 0;
  text-transform: none;
  border-radius: 2rem !important;
}

.btn_membre {
  font-family: var(--jta-font) !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  text-transform: none !important;
  border: none !important;
  background-color: #444 !important;
  padding-top: 4px !important;
  border-radius: 2rem !important;
  width: 120px !important;
  height: 40px !important;
  float: left !important;
}
.btn_membre a {
  color: #ffffff !important;
  text-decoration: none !important;
}
.btn_membre a:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #d1072e;
  text-align: center;
  font-size: 18px;
  font-weight: 300;
  text-transform: none;
  border: none;
  margin-top: -4px;
  padding-top: 4px;
  border-radius: 2rem;
  width: 120px;
  height: 40px;
  float: left;
}

.btn_pub {
  font-family: var(--jta-font) !important;
  background: #39b900;
  display: block;
  padding: 8px 0;
  font-size: 35px;
  color: #fff !important;
  font-weight: normal;
  text-align: center;
  margin: 0;
  text-transform: none;
  border-radius: 2rem;
  line-height: 35px;
}
.btn_pub:hover {
  background: #d1072d;
  display: block;
  padding: 8px 0;
  font-size: 35px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  margin: 0;
  text-transform: none;
  border-radius: 2rem;
  line-height: 35px;
}

.elementor-button.elementor-size-lg {
  font-family: var(--jta-font) !important;
  font-size: 18px;
  padding: 20px 40px;
  -webkit-border-radius: 5px;
  border-radius: 2rem;
}

.wrapper {
  background-color: #3c558d;
  color: #fff;
}
.wrapper:hover {
  background-color: #d1072e;
  color: #fff;
}


/* =========================
   8) Popular posts (WPP)
========================= */

.wpp-post-title {
  margin: 0 0 0.5rem;
  font-family: var(--jta-font) !important;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  display: block;
  font-weight: 600;
}

.wpp-thumbnail {
  display: inline;
  float: left;
  margin: 0 1rem 0 0;
  border: none;
  margin-bottom: 15px !important;
}


/* =========================
   9) Commentaires
========================= */

.comments-title,
.comment-reply-title {
  font-family: var(--jta-font) !important;
  line-height: 24px !important;
  color: #444444 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.comment-metadata a,
.logged-in-as a {
  color: #798189 !important;
}

.fn {
  font-family: var(--jta-font) !important;
  font-weight: 500;
  font-size: 22px;
  color: #444444;
}

.comment-content {
  font-style: normal;
}


/* =========================
   10) Elementor / YARPP / Divers
========================= */

.elementor-3153 .elementor-element.elementor-element-00ca8ec .elementor-icon-list-text {
  color: #444444;
  text-decoration: underline;
}

.yarpp-related a {
  text-decoration: none;
  font-weight: normal;
}

.pubdroite {
  pointer-events: none !important;
}

/* Bord arrondi boutons Elementor (page 243) */
.elementor-243 .elementor-element.elementor-element-ea43d06 .elementor-button,
.elementor-243 .elementor-element.elementor-element-77d4f29 .elementor-button,
.elementor-243 .elementor-element.elementor-element-dd22fb7 .elementor-button {
  border-radius: 2rem;
}


/* =========================
   11) Composants éditoriaux (encarts, tableaux, FAQ...)
   (MODIFS ICI : Retenir / Johnson / FAQ)
========================= */

/* Encart "Ce qu'il faut retenir" — SANS ORANGE */
.encart-retention-home {
  font-family: var(--jta-font) !important;
  background: #ffffff;
  border: 1px solid var(--jta-border);
  border-top: 4px solid var(--jta-red);
  border-radius: 10px;
  padding: 18px 22px 16px;
  margin: 24px 0 32px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.encart-retention-label {
  font-family: var(--jta-font) !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--jta-red);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.encart-retention-label::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--jta-red);
  display: inline-block;
}

.encart-retention-list {
  margin: 0;
  padding-left: 18px;
}

.encart-retention-list li {
  margin-bottom: 6px;
  font-family: var(--jta-font) !important;
  font-size: 17px;
  line-height: 1.5;
  color: var(--jta-text);
}

/* Johnson Box — SANS BLEU */
.johnson-box {
  font-family: var(--jta-font) !important;
  margin: 40px 0;
  padding: 24px 28px;
  background: var(--jta-soft2);
  border: 1px solid var(--jta-border);
  border-left: 5px solid var(--jta-red);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.johnson-box-title {
  font-family: var(--jta-font) !important;
  margin: 0 0 10px 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: inherit !important;  
  line-height: inherit !important;
  color: var(--jta-red);
}

.johnson-box-content {
  font-family: var(--jta-font) !important;
  margin: 0;
  font-size: inherit !important; 
  line-height: inherit !important;
  color: var(--jta-text);
}

/* Variante audio — neutre, sans bleu */
.johnson-box.johnson-audio {
  background: var(--jta-soft2);
  border: 1px solid var(--jta-border);
  border-left: 5px solid var(--jta-red);
}
.johnson-box.johnson-audio .johnson-box-title::before { content: "🎧 "; }

.johnson-audio-player { margin-top: 14px; }
.johnson-audio-player audio {
  width: 100%;
  max-width: 100%;
}

/* Tableau structurant (inchangé) */
.table-jetrouvelamour-wrapper {
  margin: 2em 0;
  text-align: center;
  font-family: var(--jta-font) !important;
}

.table-title {
  font-family: var(--jta-font) !important;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.5em;
  color: #111827;
}

.table-jetrouvelamour {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-family: var(--jta-font) !important;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.table-jetrouvelamour th,
.table-jetrouvelamour td {
  padding: 16px 12px;
  min-height: 65px;
  text-align: center;
  vertical-align: middle;
  font-family: var(--jta-font) !important;
}

.table-jetrouvelamour thead th {
  background-color: #f3f6fb;
  color: #111827;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}

.table-jetrouvelamour tbody td {
  border-bottom: 1px solid #e5e7eb;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.table-jetrouvelamour tbody tr:last-child td { border-bottom: none; }
.table-jetrouvelamour tbody tr:hover { background-color: #eef2f7; }

/* CTA final (inchangé) */
.cta-final-wrapper {
  text-align: center;
  margin: 40px auto 32px;
  max-width: 900px;
  font-family: var(--jta-font) !important;
  padding: 26px 16px 32px;
  background: #e9f2ff;
  border-radius: 12px;
}

.cta-final-title {
  font-family: var(--jta-font) !important;
  font-size: 26px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 12px;
}

.cta-final-subtext {
  font-family: var(--jta-font) !important;
  font-size: 15.5px;
  color: #374151;
  max-width: 650px;
  margin: 0 auto 22px;
  line-height: 1.6;
}

.cta-final-button a {
  font-family: var(--jta-font) !important;
  display: inline-block;
  background-color: #0085e8;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 19px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cta-final-button a:hover {
  background-color: #004c99;
  color: #ffffff;
}

/* FAQ (accordéon details) — SANS BLEU */
.faq-jetrouvelamour-seo {
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--jta-font) !important;
}

.faq-jetrouvelamour-seo .faq-item { margin-bottom: 16px; }

.faq-jetrouvelamour-seo .faq-item details {
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--jta-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease, transform 0.12s ease;
}

.faq-jetrouvelamour-seo .faq-item details:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.faq-jetrouvelamour-seo .faq-item summary {
  font-family: var(--jta-font) !important;
  padding: 18px 22px;
  font-size: 18px;
  font-weight: 700;
  color: #121212;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.faq-jetrouvelamour-seo .faq-item summary::-webkit-details-marker { display: none; }

.faq-jetrouvelamour-seo .faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 800;
  color: var(--jta-red);
  margin-left: 14px;
  transition: transform 0.25s ease, color 0.25s ease;
}

.faq-jetrouvelamour-seo .faq-item details[open] summary::after { content: "-"; }

.faq-jetrouvelamour-seo .faq-item details > div {
  font-family: var(--jta-font) !important;
  padding: 20px 22px;
  background: var(--jta-soft); /* neutre (plus de bleu) */
  border-top: 1px solid var(--jta-border);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--jta-text);
}

/* Editorial box (optionnel) */
.editorial-box {
  font-family: var(--jta-font) !important;
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 16px;
  background: #ffffff;
  max-width: 920px;
}

.editorial-box ul {
  margin: 0;
  padding-left: 18px;
}


/* =========================
   12) Social
========================= */

.btn-facebook {
  font-family: var(--jta-font) !important;
  color: #fff;
  text-align: center;
  font-size: 25px;
}
.btn-facebook:hover {
  color: #fff;
}



/* =========================
   TABLEAU — Entête rouge charte
========================= */

.table-jetrouvelamour thead th {
  background-color: #d1072d !important;  /* rouge du site */
  color: #ffffff !important;            /* texte blanc */
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #b10625 !important; /* rouge un peu plus foncé */
}


/* =========================
   Espacement Hn ↔ Listes
========================= */

/* Espace APRÈS un titre (avant une liste) */
.entry-content h2,
.entry-content h3,
.entry-content .intertitre {
  margin-bottom: 1.2em !important;
}

/* Espace supplémentaire si une liste suit directement un titre */
.entry-content h2 + ul,
.entry-content h2 + ol,
.entry-content h3 + ul,
.entry-content h3 + ol,
.entry-content .intertitre + ul,
.entry-content .intertitre + ol {
  margin-top: 0.8em !important;
}

/* Espace APRÈS une liste (avant le prochain bloc/titre) */
.entry-content ul,
.entry-content ol {
  margin-bottom: 2em !important;
}


/* =========================
   Espace sous la table des matières
========================= */

#ez-toc-container {
  margin-bottom: 3em !important;   /* espace sous la TOC */
}

/* Si jamais le thème colle trop le H2 juste après */
#ez-toc-container + h2,
#ez-toc-container + .intertitre {
  margin-top: 2em !important;
}

/* =========================
   FAQ — même taille que le corps du texte
========================= */

/* Question */
.faq-jetrouvelamour-seo summary {
  font-size: 20px !important;
  line-height: inherit !important;
}

/* Réponse */
.faq-jetrouvelamour-seo details > div {
  font-size: inherit !important;
  line-height: inherit !important;
}